每个标记谷歌地图的信息窗口

Question

我在信息窗口中为动态标记实现一些数据时遇到了一些麻烦，这些动态标记是我使用解析中的一些地理点制作的。

 function initMap(arlat, arlon, arname, artel, ardesc, aradd, arithmisi) {

    var map = new google.maps.Map(document.getElementById('map'), {
                            zoom: 6,
                            center: {
                                lat: 37.58,
                                lng: 23.43
                            }
                        });
                        var iconBase = 'http://sourtouki.gr/';

                        for (j = 0; j < arithmisi; j++) {
                            var contentString = '<div id="content">' +
                                '<div id="siteNotice">' +
                                '</div>' +
                                arname[j] +
                                '<div id="bodyContent">' +
                                ardesc[j] + "<br>" + aradd[j] + "<br>" + artel[j] + "<br>" +
                                '</div>' +
                                '</div>';


                            var marker = new google.maps.Marker({
                                position: {
                                    lat: arlat[j],
                                    lng: arlon[j]
                                },
                                map: map,
                                icon: iconBase + 'sourtoukilogo.png',        
                                title: arname[j]
                            });        
                        }
                        var infowindow = new google.maps.InfoWindow({
                            content: contentString
                        });

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

因此，通过上面的代码，我将一些表中的一些数据推送到地图中。标记是在必须的位置创建的，但是每当我单击标记时，它只会打开一个。 它加载了 17 个标记，但打开的唯一信息窗口是第一个条目，无论我按下什么标记。 每个标记的标题也是正确的。

更新 我在这张地图上有 17 个条目、17 个地理点（lat、lng）、17 个名称、17 个描述等。 因此，通过上面的代码，我得到了所有的地理点，并将标记放在正确的位置到地图中。我希望当我点击一个标记来获取名称和地址并将其显示在信息窗口中。但我想我在 for 循环中的某个地方出错了。尽管我按原样获取所有数据，每个地理点都有正确的名称等，但是每当我单击标记时，只有第一个条目会打开信息窗口，假设我单击地图中的第三个标记，第一个信息窗口将打开，如果我按下第 12 个标记也会发生。 知道为什么会这样吗？？

更新 2

function initMap(arlat, arlon, arname, artel, ardesc, aradd, arithmisi) {



                    // console.log(arlat.length + arlon.lenght);

                    var map = new google.maps.Map(document.getElementById('map'), {
                        zoom: 6,
                        center: {
                            lat: 37.58,
                            lng: 23.43
                        }
                    });
                    var iconBase = 'http://sourtouki.gr/';

                    infowindow = new google.maps.InfoWindow();
                    for (j = 0; j < arithmisi; j++) {

                        var marker = new google.maps.Marker({
                            position: {
                                lat: arlat[j],
                                lng: arlon[j]
                            },
                            map: map,
                            icon: iconBase + 'sourtoukilogo.png',

                            title: arname[j]
                        });
                    var contentString = '<div id="content">' +
                            '<div id="siteNotice">' +
                            '</div>' +
                            arname[j] +
                            '<div id="bodyContent">' +
                            ardesc[j] + "<br>" + aradd[j] + "<br>" + artel[j] + "<br>" +
                            '</div>' +
                            '</div>';

                             google.maps.event.addListener(marker, 'click', function() {
                                    infowindow.setContent(contentString);
                                    infowindow.open(map,this);

                                 });


                    }


                }

在第二次更新时，我在 for 循环之外创建了一个空的信息窗口，在我调用里面的内容之后，现在它打开了所有的信息窗口，但里面的内容相同。

一般来说，我在 stackoverflow 的其他问题中尝试了很多答案，但没有一个解决方案适用于我的情况，如果有人可以提供帮助，我将不胜感激！

Answer 1

您的 for 循环仅用于标记，而不用于 infowindow 和侦听器，因为这些都在循环之外尝试这种方式.. 但最重要的是，您需要一个标记数组而不是单个标记

var markers = [];

for (j = 0; j < arithmisi; j++) {
    var contentString = '<div id="content">' +
        '<div id="siteNotice">' +
        '</div>' +
        arname[j] +
        '<div id="bodyContent">' +
        ardesc[j] + "<br>" + aradd[j] + "<br>" + artel[j] + "<br>" +
        '</div>' +
        '</div>';


    var marker = new google.maps.Marker({
        position: {
            lat: arlat[j],
            lng: arlon[j]
        },
        map: map,
        icon: iconBase + 'sourtoukilogo.png',        
        title: arname[j]
    });        

    k = markers.push(marker);

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

    markers[k-1].addListener('click', function() {
      infowindow.open(map, marker);
    });
}

Answer 2

信息窗口的内容是在 for 循环之外设置的。所以它总是会被设置为 contentString 的最后一个值。