將谷歌地圖標記添加到基於HTML選擇的屏幕

-1

我正在尋找基於選擇下拉列表將標記放置在谷歌地圖上。我有我的文檔與一個XML文檔相關，該文檔包含來自數據庫的結果，我想根據我選擇的下拉列表從該xml文檔中獲取結果。然後我想將這些標記放置在地圖上。任何關於最佳途徑的想法？我想如果可能的話使用PHP。將谷歌地圖標記添加到基於HTML選擇的屏幕

來源

2012-03-14 Dude

您將只能使用PHP作爲其中的一部分，使用谷歌地圖在地圖上繪製標記，以便使用JavaScript。以下是如何加載Google地圖並在其上顯示標記的非常基本的示例。顯然你需要迭代你的數據源並使用它來填充選擇列表中的選項值。如果您正在處理大量潛在項目，則可以通過單獨的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>

來源

2012-03-14 03:26:37 javram

這是一個很好的幫助，謝謝。但是，我的選擇固定爲男性和女性。當選擇一個或另一個時，我只想將xml文檔中的男性或女性條目放置在地圖上。有更多的見解？ – Dude 2012-03-14 05:06:09

您可以粘貼部分XML文檔作爲參考嗎？ – javram 2012-03-14 05:22:08

' '------>所以我想只返回實例只有男性條目，如果這是什麼選擇選項被挑選 – Dude 2012-03-14 05:33:37

將谷歌地圖標記添加到基於HTML選擇的屏幕

回答

相關問題