通過Ajax在Google地圖中顯示其他標記

Question

我已經使用“ maps.googleapis.com/maps/api/js?v=3”創建了一個Google地圖。 在該地圖中，我正在顯示不同位置的標記，效果很好。 下面是我使用的代碼。

google.maps.event.addDomListener(window, 'load', function() {
                var map = new google.maps.Map(document.getElementById('map1'), {
                      zoom: 10,
                      center: new google.maps.LatLng(latitude, longitude),
                      mapTypeId: google.maps.MapTypeId.ROADMAP
                });
                var marker = new google.maps.Marker({
                                map: map,
                                position: new google.maps.LatLng(23.42323, -45.47653),

                            });
});

現在，我想在Ajax中添加更多位置標記。 例如：我將從下拉列表中添加位置名稱，它將對服務器端進行ajax調用。 拉出位置的經度和緯度，它將顯示在地圖上。 我怎樣才能做到這一點。

我寫了一個單獨的js函數來執行ajax調用，但是里面的代碼沒有得到'map'實例，這里我只使用了這段代碼

    new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(23.42323, -45.47653),
});

在這里，我不會再次初始化地圖。 因此，它沒有得到地圖實例並拋出錯誤。 如何解決。

Answer 1

地圖的范圍僅限於事件句柄內部。 嘗試這個：

var map, markerCollection;

google.maps.event.addDomListener(window, 'load', function() {
    map = new google.maps.Map(document.getElementById('map1'), {
        zoom: 10,
        center: new google.maps.LatLng(latitude, longitude),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
});

function addMarker(lat, lng){
    var marker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(lat, lng),
    });
    markerCollection.push(marker);
}

注意：1）在定義地圖中心時，請填寫“緯度”和“經度”的值。 否則，您只會得到顯示的地圖。 2）我知道將標記添加到數組中可能不是最佳做法，但我發現這樣做比訪問后者容易。

Answer 2

由於map不是全局變量，因此它已被取消引用。 使map對象成為全局對象，或者使之成為存儲所有代碼的容器函數。

全局JS示例

//now it's global
var map;
google.maps.event.addDomListener(window, 'load', function () {
    map = new google.maps.Map(document.getElementById('map1'), {
        zoom: 10,
        center: new google.maps.LatLng(latitude, longitude),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var marker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(23.42323, -45.47653),
    });
});