根据 HTML 选择将谷歌地图标记添加到屏幕答案

【问题标题】：Adding google map marker to screen based off a HTML select根据 HTML 选择将谷歌地图标记添加到屏幕
【发布时间】：2012-03-14 02:49:17
【问题描述】：

我希望根据选择下拉菜单在谷歌地图上放置标记。我的文档与具有数据库结果的 XML 文档相关，我想根据我的选择下拉菜单从该 xml 文档中获取结果。然后我想将这些标记放在地图上。关于解决此问题的最佳方法的任何想法？如果可能，我想使用 php。

【问题讨论】：

标签： php mysql html xml google-maps

【解决方案1】：

您将只能使用 PHP 作为其中的一部分，使用您需要使用 javascript 的谷歌地图在地图上绘制标记。这是一个非常基本的示例，说明如何加载谷歌地图并在其上显示标记。显然，您需要遍历数据源并使用它来填充选择列表中的选项值。如果您正在处理大量潜在项目，则在单独的 http 请求中获取选项值可能是有意义的（例如使用 ajax）。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Simple Map</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=3&amp;sensor=false" type="text/javascript"></script>
    <script type="text/javascript">
        var map;

        var male = [[39.167107,-86.534363],[39.130554,-85.128891]]; 
        var female = [[39.167107,-84.534363],[38.130554,-83.128891]];

        function initialize() {
          if (GBrowserIsCompatible()) {
            map = new GMap2(document.getElementById("map_canvas"));
            map.setCenter(new GLatLng(39.167107,-86.534363), 7);
            map.setUIToDefault(); 

          }
        }  

        function addMarker(){ 
            var select = document.getElementById("choose_option");
            var currentValue = select.options[select.selectedIndex].value;     

            if (currentValue == "Male")
            {  
                for (i=0;i<male.length;i++){
                    var markerPoint = new GLatLng(male[i][0], male[i][1]);
                    var marker = new GMarker(markerPoint, {draggable: true, bouncy: true});
                    map.addOverlay(marker);
                }
            }
            else if (currentValue == "Female")
            {    
                for (i=0;i<female.length;i++){
                    var markerPoint = new GLatLng(female[i][0], female[i][1]);
                    var marker = new GMarker(markerPoint, {draggable: true, bouncy: true});
                    map.addOverlay(marker);
                }
            } 

        }
    </script>
  </head>

  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 500px; height: 300px"></div> 
    <select id="choose_option" onchange="addMarker()"> 
        <option id="1" value="">Choose</option>  
        <option id="2" value="Male">Male</option>
        <option id="3" value="Female">Female</option>
    </select>
  </body>
</html>

【讨论】：

这是一个很大的帮助，谢谢。但是，我的选择仅限于男性和女性。 when one or the other is selected I want only the male or female entries from the xml document to be placed on the map.还有更多见解吗？
您可以粘贴部分 XML 文档作为参考吗？
<markers> <marker name="johnnyjacksin" gender="male" lat="39.167107" lng="-86.534363"/> <marker name="philhubert" gender="male" lat="39.130554" lng="-85.128891"/> <marker name="nancypotter" gender="female" lat="39.167107" lng="-84.534363"/> <marker name="lindaellerbe" gender="female" lat="38.130554" lng="-83.128891"/> </markers> ------>所以我想只返回男性条目，如果这是选择选项的话
好的，我修改了原始答案中的代码。您将需要弄清楚如何将 XML 文件转换为上面名为男性和女性的 javascript 数组（您可以在服务器端使用 php）。其余部分应该按照您描述的方式工作。