Google Maps InfoWindow顯示在錯誤的Map上

Question

我的問題是在WP-Plugin中，我寫道，當同時打開多個地圖時，
例如，在首頁上顯示最后3個帖子，每個帖子都帶有一個自己的微型地圖，該微型地圖顯示了它們的位置，當我單擊其中一個標記時，無論從哪個地圖開始，infoWindows都將顯示在最后一個地圖中。 。

我使用以下代碼初始化地圖：

function Initialize(lat, lng, zm, pid) {    
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(lat,lng);
    var mapOptions = {
        zoom: zm,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    var name = "map_canvas" + pid;  

    map = new google.maps.Map(document.getElementById(name), mapOptions);
}

並按照以下步驟設置標記：

function AddMarker( lat, lng, address, title, link, image, target ) {

    var marker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(lat, lng),
        icon: new google.maps.MarkerImage( image ),
        title: title
    });

    var infowindow = new google.maps.InfoWindow({ 
        content: '<a href="' + link + '" target="_' + target + '">' + title + '</a><br /><small><font color="#000000">' + address + '</font></small>', 
    });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
    });
}

var map位於函數文件的頂部，有點像Global，因此標記都在正確的映射上，但是可惜的是，信息窗口不會跟隨它們...

有沒有其他人經歷過這樣的事情，或者有一個想法我該如何解決？

Answer 1

您的問題是這樣的：

google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
});

單擊map時訪問map變量，而不是分配處理程序時訪問變量的值。 傳遞副本並使用該副本：

google.maps.event.addListener(marker, 'click', (function (m) {
    return function() {
        infowindow.open(m,marker);
    };
}(map)));

編輯：

上面使用了立即調用的函數表達式來傳遞map變量的副本。 所有這些操作就是聲明一個函數，然后立即調用它，並傳入map 。

function (m) {
    return function() {
        infowindow.open(m,marker);
    };
}(map)

但是，整個過程都需要包裝在()以便JS解析器將其作為函數表達式而不是函數聲明讀取。

解決該問題的另一種方法是：

function AddMarker( lat, lng, address, title, link, image, target ) {

    var marker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(lat, lng),
        icon: new google.maps.MarkerImage( image ),
        title: title
    });

    var infowindow = new google.maps.InfoWindow({ 
        content: '<a href="' + link + '" target="_' + target + '">' + title + '</a><br /><small><font color="#000000">' + address + '</font></small>', 
    });

    // Add a function that returns a new function that uses a local
    // copy of the passed in map.
    var getMapClickListener = function (m) {
        return function () {
            infowindow.open(m, marker);
        };
    };

   // Then use the new function when adding the handler.
    google.maps.event.addListener(marker, 'click', getMapClickListener(map));
}

Answer 2

我認為問題在於，當您使用pid將地圖名稱正確分配給name ，然后pid每個地圖分配給map變量，每個map變量都覆蓋另一個。

您可能會發現有用的是使用對象以pid作為鍵來保存地圖：

var mapHolder = {};
var name = "map_canvas" + pid;
var mapHolder[pid] = new google.maps.Map(document.getElementById(name), mapOptions);

這樣，您只需將pid傳遞給addMarker函數即可輕松訪問每個地圖：

function AddMarker( lat, lng, address, title, link, image, target, pid) {

  var marker = new google.maps.Marker({
    map: mapHolder[pid],
    position: new google.maps.LatLng(lat, lng),
    icon: new google.maps.MarkerImage( image ),
    title: title
  });

  var infowindow = new google.maps.InfoWindow({
    content: // content
  });

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(mapHolder[pid], marker);
  });

}

這樣，所有標記和信息窗口都應在正確的地圖上打開。