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是关于范围问题的好帖子。

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

1 个答案: