Google 地图信息窗口仅显示在 JavaScript 中的一个标记上

Question

我正在开发一个提供基于位置的服务的网站。因此，我正在使用 JavaScript 将我的网站与 Google Map API 集成。然后我将数据导入 Map 并将每个项目显示为 Map 上的标记。导入数据并将其显示为地图上的标记工作正常。

但我在为地图上的每个标记显示信息窗口时遇到问题。问题是我的地图上有两个标记，但是当我单击任何项​​目时，信息窗口总是显示在同一个项目上。请看下面的截图。

正如您在屏幕截图中看到的，我单击了右侧的标记，但信息窗口显示在不同的项目上。

这是我用于地图的完整 JavaScript：

    var map;

    function initialize() {
        var lat = $('.region-latitude').val();
        var long = $('.region-longitude').val();
        map = new google.maps.Map(document.getElementById('map'), {
            zoom: 4,
            center: new google.maps.LatLng(lat, long),
            mapTypeId: google.maps.MapTypeId.TERRAIN
        });

        var script = document.createElement('script');
        script.src = $('.map-items-url').val();
        document.getElementsByTagName('head')[0].appendChild(script);
    }

    window.items_callback = function (results) {

        for (var i = 0; i < results.features.length; i++) {
            var coords = results.features[i].geometry.coordinates;

            var latLng = new google.maps.LatLng(coords[0], coords[1]);
            var itemMarker = new google.maps.Marker({
                position: latLng,
                map: map,
                title: results.features[i].name
            });

            var contentString = '<h3>' + results.features[i].name + '</h3>';

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

            itemMarker.addListener('click', function () {
                infowindow.open(map, itemMarker);
            });

        }
    }

    google.maps.event.addDomListener(window, 'load', initialize)

我的代码有什么问题？如何为每个标记显示不同的信息窗口？

Answer 1

这看起来像是范围问题。在激活click 处理程序时，itemMarker 指向最后添加的标记，infowindow 指向最后创建的信息窗口。这就是为什么它总是只显示最后添加的标记。您必须创建一个封装这些变量的范围。

试试这个：

for (var i = 0; i < results.features.length; i++) {
   (function(index){
        var coords = results.features[index].geometry.coordinates;

        var latLng = new google.maps.LatLng(coords[0], coords[1]);
        var itemMarker = new google.maps.Marker({
            position: latLng,
            map: map,
            title: results.features[index].name
        });

        var contentString = '<h3>' + results.features[index].name + '</h3>';

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

        itemMarker.addListener('click', function () {
            infowindow.open(map, itemMarker);
        });

    })(i);
}

更多信息请查看SO question and answer 和this SO question and answers。 this 也是关于范围问题的好帖子。