如何在已加載地圖後向Google地圖添加標記？

我工作的一個簡單的PhoneGap應用程序 - 我來回踱步我家來收集座標：如何在已加載地圖後向Google地圖添加標記？

var positions = [ 
    {lat:123.12313123, lng:123.123345131}, 
    {lat:123.12313123, lng:123.123345131} 
]

我檢查出其中的作品完美的documentation here。在那個例子中，當我創建initMap()時，我所理解的腳本defer async就會觸發。 initMap()有一個標記。這在我的應用程序中完美地工作，在Straya中顯示標記。

首先，我創建的地圖：

var map; // making it global 

    function initMap() { 
    var myLatLng = {lat: 39.909736, lng: -98.522109}; // center US 

    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 2, 
     center: myLatLng 
    }); 
    }

這繪製地圖。現在，我想遍歷我的座標，如下所示：

// Remember, the map has already loaded at this point 
$(positions).each(function(i, item) { 
      var marker = new google.maps.Marker({ 
      position: item, 
      map: map, 
      title: 'Route item ' + i 
      }); 
     })

這不起作用。我無法在循環中運行initMap()，並且它無法正常工作。我無法用預設的座標數運行initMap()，因爲在完成之前我不知道它們是什麼。我在這裏做錯了什麼？

來源

2016-04-25 dsp_099

這是一個範圍問題。在初始化地圖時，您說的是var map，它在initMap函數內部創建了一個名爲map的局部變量。這意味着全局變量map仍未初始化，當您創建標記時，它不會將它放到地圖上，因爲您傳遞給標記的變量map未定義。取出var關鍵字，和你的新地圖將在函數外被分配到原全球map變量，就像這樣：

var map; // making it global 

    function initMap() { 
    myLatLng = {lat: 39.909736, lng: -98.522109}; // center US 

    map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 2, 
     center: myLatLng 
    }); 
    }

此外，作爲一個不相關的說明，我想你誤會什麼異步延遲呢。當您使用async和defer屬性加載腳本時，您告訴瀏覽器等待整個頁面加載完畢，然後加載腳本。在谷歌地圖的情況下，在腳本的實際URL中，還可以傳遞加載腳本時要調用的函數的名稱：&callback=initMap。

因此，瀏覽器加載整個頁面，然後獲取谷歌地圖腳本，然後執行谷歌地圖腳本獲取谷歌地圖代碼準備好供您使用，然後該代碼調用initMap。

來源

2016-04-25 22:23:26 ChemicalRocketeer

我可能會看到問題 - 您宣佈map兩次，一次在initMap函數之外，一次在裏面。這意味着全局變量map將保持爲undefined。從轉讓前取下var：

map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 2, 
     center: myLatLng 
    });

現在，您將您的功能範圍之外分配圖實例的map變量，而不是創建一個與您的全球碰撞的新地圖變量。

另外，不要忘記它通常最好避免這些全局變量可能的時候:)

來源

2016-04-25 22:18:21

如何在已加載地圖後向Google地圖添加標記？

回答

相關問題