2010-11-01 131 views
-1

在谷歌地圖上顯示多個標記我有以下腳本來使用谷歌地圖API,我必須創建一個具有多個標記(氣球形狀的圖標指向某個東西)的地圖,我需要每個那些標記指向地圖的不同區域(即不同的座標),我該怎麼做? 注意:我沒有經緯度來放置標記的區域,而是具有放置標記的區域的地址。通過提供地址

下面給出了在Google地圖上顯示多個標記的代碼,但它不能按預期工作!

var map = null; 
var geocoder = null; 

function initializeNew() { 
    var allAddress = document.getElementById("HiddenField1").value; 
    var testary = new Array(); 
    testary = allAddress.split("|"); 

     if (GBrowserIsCompatible()) { 
     //calls map to appear inside <div> with id, "map_canvas" 
     map = new GMap2(document.getElementById("map_canvas")); 

     //adds zoom and arrow controls to map 
     //map.addControl(new GSmallMapControl()); 

     var marker = null; 
     var i = 0; 
     for (i = 0; i < testary.length; i++) { 

      address = testary[i]; 

      geocoder = new GClientGeocoder(); 


      //converts a street address into geocode for the api 
      geocoder.getLatLng(
      address, 
      function(point) { 
       if (!point) { 
        alert(address + " not found"); 
       } else { 
        map.setCenter(point, 13); 
        marker = new GMarker(point); 
        map.addOverlay(marker); 

        map.setMapType(G_HYBRID_MAP); 

        //adds your own marker title and description in html 
        marker.openInfoWindowHtml("<p class='para1bold' style=\"font-weight: bold;\">Address</p><p class='para1'>" + address + "</p>"); 
        //Add click event on push pin to open info window on click of the icon 
        GEvent.addListener(marker, "click", function() { 
        marker.openInfoWindowHtml("<p class='para1bold' style=\"font-weight: bold;\">Address</p><p class='para1'>" + address + "</p>"); 
       }); 
        //Provides map,satellite,hybrid and terrain views in the map along with zoom control 
        map.setUIToDefault(); 
       } 
      } 
    ) 
     } 


    } 
} 

我已經將一組項目的地址存儲在一個數組中,並循環顯示地圖中的標記。這僅顯示數組中最後一個地址的一個標記。請更正此代碼或提供新代碼,以通過提供地址在Google地圖中顯示多個標記。

+0

您是否嘗試打印出地理編碼的結果?所有不同的經緯度? – jebberwocky 2010-11-01 10:14:51

+0

當我在geocoder.getLatLng方法的else部分中輸出地址變量(數組中的項)時,它顯示數組中的最後一項(最後一個地址)。我認爲它在Google地圖中的相同位置顯示多個標記!任何人都可以指導我糾正代碼! – banupriya 2010-11-01 10:45:31

+0

也許您提供給Google Geocoder webervice的地址太相似了,這可能會導致相同的經過長時間的結果。 – Vishwanath 2010-11-13 14:13:27

回答

0

嘗試這個辦法:把var在前面標記

else { 
       map.setCenter(point, 13); 
       var marker = new GMarker(point); 
       map.addOverlay(marker); 

       map.setMapType(G_HYBRID_MAP); 

       //adds your own marker title and description in html 
       marker.openInfoWindowHtml("<p class='para1bold' style=\"font-weight: bold;\">Address</p><p class='para1'>" + address + "</p>"); 
       //Add click event on push pin to open info window on click of the icon 
       GEvent.addListener(marker, "click", function() { 
       marker.openInfoWindowHtml("<p class='para1bold' style=\"font-weight: bold;\">Address</p><p class='para1'>" + address + "</p>"); 
      }); 

UPDATE

var geocoder = new GClientGeocoder(); 

var addresses = ["new york","chicago"]; 
var curIndex = 0; 

function showAddress() { 
    var _cur = addresses[curIndex]; 
    geocoder.getLatLng(
    _cur, 
    function(point) { 
     if (!point) { 
     alert(_cur + " not found"); 
     } else { 
     console.log(_cur+":"+point); 
     } 
     //do next after done 
     curIndex++; 
     if(curIndex<addresses.length) 
     showAddress(); 
    } 
); 
} 

showAddress(); 
</script> 
+0

抱歉還是沒變!它沒有解決! – banupriya 2010-11-01 10:03:28

+0

您是否刪除了「var marker = null;」 ? – jebberwocky 2010-11-01 10:09:04

+0

是的,我刪除了var marker = null – banupriya 2010-11-01 10:14:20

0

我就遇到了這個確切的同樣的問題,fixed it的。看看我用過的代碼。具體位是那個標記需要是一個數組,當你打開infowindow時,內容需要存儲在標記數組中。我還建議你使用JSON代替,而不是用'|'分隔,這樣更容易解析。