Google地图信息窗口仅显示在JavaScript中的一个标记上 [英] Google Map info window is only showing on one marker in JavaScript

问题描述

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

I am developing a Website that offers location based service. So I am integrating my website with Google Map API using JavaScript. Then I import the data to Map and show each item as marker on Map. Importing and showing data as markers on map is working fine.

但是我在显示地图上每个标记的信息窗口时遇到问题。问题是我在地图上有两个标记，但是当我点击任何项目时，信息窗口始终显示在同一项目上。请参阅下面的截图。

But I am having a problem with showing info window for each marker on map. The problem is I got two markers on my map, but when I click on whatever item, info window is always showing on the same item. Please see the screenshot below.

< img src =https://i.stack.imgur.com/SZeAl.pngalt =在这里输入图片描述>

当你可以在截图中看到，我点击了右侧的标记，但信息窗口显示在不同的项目上。

As you can see in the screenshot, I clicked on the marker on the right, but info window is showing on the different item.

这是我完整的JavaScript地图：

This is my full JavaScript for map:

    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)

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

What is wrong with my code? How can I show different info window for each marker?

推荐答案

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

This looks like a scope problem. At the moment when click handler is activated, the itemMarker points to the last added marker as well as infowindow points to last info window created. That's why it always shows only over last added marker. You have to create a scope which encapsulates these variables.

试试这个：

Try this:

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问答以及这个问题和答案。另外这是一篇关于范围问题的好帖子。

For more information check this SO question and answer and also this SO question and answers. Also this is a good post on the scopes matter.

这篇关于Google地图信息窗口仅显示在JavaScript中的一个标记上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！