Question

我的问题出在WP插件中我写的是当同时打开多个地图时，
例如在显示最后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，因此标记都在右边的地图上，但遗憾的是infowindows不会跟随它们...

其他人是否经历过这样的事情，或者知道如何解决这个问题？

Answer 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));
}

Answer 2

我认为问题在于，当您使用name正确地将地图名称分配给pid时，每个地图都会被分配到map变量，每个地图都会覆盖另一个。

您可能会发现有用的是使用对象来保存地图，使用pids作为键：

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);
  });

}

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

Google地图InfoWindow显示在错误的地图上

2 个答案: