javascript - Google map 信息窗口显示在错误的 map 上

Question

我的问题出在 WP-Plugin 中，我写道，当同时打开多个 map 时，
例如在主页上显示最后 3 个帖子，每个帖子都有一个显示其位置的小 map ，当我点击其中一个标记时，无论在哪张 map 上，信息窗口都会显示在最后一张 map 中......

我使用以下代码初始化 map :

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

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

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