Google Maps InfoWindow 显示在错误的地图上答案

【问题标题】：Google Maps InfoWindow shows up on wrong MapGoogle Maps InfoWindow 显示在错误的地图上
【发布时间】：2014-01-28 01:46:34
【问题描述】：

我的问题在于 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 位于函数文件的顶部，有点像全局，因此标记都在正确的地图上，但遗憾的是信息窗口不会跟随它们...

有没有其他人经历过这样的事情，或者知道如何解决它？

【问题讨论】：

标签： javascript google-maps google-maps-api-3 google-maps-markers infowindow

【解决方案1】：

你的问题是这样的：

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

单击地图时访问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));
}

【讨论】：

啊好吧..这就解释了...我以为他们像标记一样同时获得参考...
但是你能解释一下那个代码吗？那个语法有点奇怪..他到底是从哪里得到正确的地图的？从标记？
我会在大约一个小时后添加一个更新，在那之前谷歌 IIFE 看看你是否能弄清楚发生了什么！

【解决方案2】：

我认为问题在于，当您使用 pid 正确地将地图名称分配给 name 时，然后将每个地图分配给 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);
  });

}

这样您的所有标记和信息窗口都应该在正确的地图上打开。

【讨论】：