Javascript 地图过滤器问题

发布于 2024-11-23 18:46:05 字数 4016 浏览 5 评论 0原文

现在我正在使用 Google Maps JavaScript API V3 来过滤地图结果。我有两个 javascript 下拉菜单。选择一个下拉选项值后，地图会过滤到该设置。因此，如果我选择业务类型“社会服务”，地图将仅显示此类业务。第二个过滤不同的主题。因此，如果选择第二个下拉菜单，它将过滤到该选项值。问题是，当选择第二个或第一个时，它会在过滤中忽略另一个。例如，我希望用户能够从第一个菜单中过滤“社会服务”，从第二个菜单中过滤“机会”。这将显示满足这两个条件的位置。目前用户只能选择其中之一。

这是页面：

LTI 地图

这是代码：

    <html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<!DOCTYPE html>
<title>Met Sacramento Internship Map</title> 

<!-- Style --> 
<style> 
  body { font-family: Arial, sans-serif; }
  #map_canvas { height: 500px; width:600px; }
</style> 

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
    var tableid = 567682;
    var layer = new google.maps.FusionTablesLayer(567682); 

  function initialize() {
    var latlng = new google.maps.LatLng(38.59970036588819, -121.541748046875);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
          layer.setMap(map);
  }
    //Change the query based on the user's selection
function interestMap(interest) {
 layer.setQuery("SELECT Address, 'Interest Area' FROM " + tableid + " WHERE 'Interest Area' CONTAINS '" + interest + "'"); 
}
function statusMap(status) {
 layer.setQuery("SELECT Address, 'Status' FROM " + tableid + " WHERE 'Status' CONTAINS '" + status + "'"); 
}
</script>

 </script> 

</head> 
<body onload="initialize();">  
  Internship Status <select onchange="interestMap(this.value);"> 
    <option value="">Interest Areas</option>
<option value="Aerospace">Aerospace</option>
<option value="Animals">Animals</option>
<option value="Architecture">Architecture</option>
<option value="Art/Music/Theatre">Art/Music/Theatre</option>
<option value="Athletics and Martial Arts">Athletics</option>
<option value="Automotive and Transportation">Automotive</option>
<option value="Business">Business</option>
<option value="Community Development">Community Development</option>
<option value="Computers">Computers</option>
<option value="Cosmetology">Cosmetology</option>
<option value="Culinary">Culinary</option>
<option value="Education">Education</option>
<option value="Government and Politics">Politics</option>
<option value="Health Science">Health Science</option>
<option value="Hospitality/Tourism/Event Planning">Event Planning</option>
<option value="Law and Public Safety">Law and Public Safety</option>
<option value="Marketing">Marketing</option>
<option value="Media and Information Technology">Media</option>
<option value="Photography">Photography</option>
<option value="Science and Technology">Science and Technology
</option>
<option value="Social Services">Social Services</option>
  </select>
   Status <select onchange="statusMap(this.value);"> 
    <option value="">Status</option>
<option value="BEING PURSUED">Being Pursued</option>
<option value="HAS INTERN">Has Intern</option>
<option value="NOT TAKING">Not Taking</option>
<option value="OPPORTUNITY">Opportunity</option>
<option value="OVER 18">Over 18</option>
<option value="POTENTIAL?">Potential</option>
<option value="SEE NOTES">See Notes</option>


  </select>
  <div id="map_canvas"></div>

</body> 
</html>

非常感谢您的帮助。

原文

Right now I am using the Google Maps JavaScript API V3 to filter map results. I have two javascript drop down menus. When one dropdown option value is selected, the map filters to that setting. So if I select the business type "Social Services" the map will show only this type of business. The second filters for a different subject. So if the second dropdown menu is selected, it will filter to this option value. The problem is, when the second or first is selected, it disregards the other in its filtering. For example, I would like users to be able to filter "Social Services" from the first menu and "Opportunity" from the second. This would display locations that meet both criteria. Right now users can only select one or the other.

Here is the page:

LTI Maps

Here is the code:

    <html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<!DOCTYPE html>
<title>Met Sacramento Internship Map</title> 

<!-- Style --> 
<style> 
  body { font-family: Arial, sans-serif; }
  #map_canvas { height: 500px; width:600px; }
</style> 

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
    var tableid = 567682;
    var layer = new google.maps.FusionTablesLayer(567682); 

  function initialize() {
    var latlng = new google.maps.LatLng(38.59970036588819, -121.541748046875);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
          layer.setMap(map);
  }
    //Change the query based on the user's selection
function interestMap(interest) {
 layer.setQuery("SELECT Address, 'Interest Area' FROM " + tableid + " WHERE 'Interest Area' CONTAINS '" + interest + "'"); 
}
function statusMap(status) {
 layer.setQuery("SELECT Address, 'Status' FROM " + tableid + " WHERE 'Status' CONTAINS '" + status + "'"); 
}
</script>

 </script> 

</head> 
<body onload="initialize();">  
  Internship Status <select onchange="interestMap(this.value);"> 
    <option value="">Interest Areas</option>
<option value="Aerospace">Aerospace</option>
<option value="Animals">Animals</option>
<option value="Architecture">Architecture</option>
<option value="Art/Music/Theatre">Art/Music/Theatre</option>
<option value="Athletics and Martial Arts">Athletics</option>
<option value="Automotive and Transportation">Automotive</option>
<option value="Business">Business</option>
<option value="Community Development">Community Development</option>
<option value="Computers">Computers</option>
<option value="Cosmetology">Cosmetology</option>
<option value="Culinary">Culinary</option>
<option value="Education">Education</option>
<option value="Government and Politics">Politics</option>
<option value="Health Science">Health Science</option>
<option value="Hospitality/Tourism/Event Planning">Event Planning</option>
<option value="Law and Public Safety">Law and Public Safety</option>
<option value="Marketing">Marketing</option>
<option value="Media and Information Technology">Media</option>
<option value="Photography">Photography</option>
<option value="Science and Technology">Science and Technology
</option>
<option value="Social Services">Social Services</option>
  </select>
   Status <select onchange="statusMap(this.value);"> 
    <option value="">Status</option>
<option value="BEING PURSUED">Being Pursued</option>
<option value="HAS INTERN">Has Intern</option>
<option value="NOT TAKING">Not Taking</option>
<option value="OPPORTUNITY">Opportunity</option>
<option value="OVER 18">Over 18</option>
<option value="POTENTIAL?">Potential</option>
<option value="SEE NOTES">See Notes</option>


  </select>
  <div id="map_canvas"></div>

</body> 
</html>

Thanks a lot for the help.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

独﹏钓一江月 2024-11-30 18:46:05

我不会创建两个不同的过滤函数，而是创建一个根据两个下拉列表中的值进行过滤的函数。

像这样的事情：

function filterResults(){
    var interest = document.getElementById('ddl-interest').value;
    var status = document.getElementById('ddl-status').value;

    layer.setQuery("SELECT Address, 'Interest Area' FROM " + tableid + 
    " WHERE 'Interest Area' CONTAINS '" + interest + "' AND 'Status' CONTAINS '" + status + "'");
}

那么您显然需要为下拉列表提供 id 'ddl-interest' 和 'ddl-status' 并在 onchange 事件上调用 'filterResults' 方法。

Instead of having 2 different functions for filtering I would create one that filters based on values from both dropdown lists.

Something like this:

function filterResults(){
    var interest = document.getElementById('ddl-interest').value;
    var status = document.getElementById('ddl-status').value;

    layer.setQuery("SELECT Address, 'Interest Area' FROM " + tableid + 
    " WHERE 'Interest Area' CONTAINS '" + interest + "' AND 'Status' CONTAINS '" + status + "'");
}

Then you obviously need to give your dropdown lists ids 'ddl-interest' and 'ddl-status' and call 'filterResults' method on onchange event.

回复收藏 0 原文

~没有更多了~