每个标记 google 地图的信息 windows

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 个地理点（纬度、经度）、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 循环外创建了一个空信息窗口，在我调用内部内容后，现在它打开了所有信息窗口，但内部内容相同。

一般来说，我已经在 Whosebug 中尝试了很多其他问题的答案，none 修复对我的情况有效，如果有人能提供帮助，我将不胜感激！

Answer 1

您的 for 循环仅适用于 marker 和 infowindow 和 listener，因为它们不在循环中，请尝试这种方式..但最重要的是，您需要一组标记而不是单个标记这种方式

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 的最后一个值。

每个标记 google 地图的信息 windows

info windows for each marker google maps

javascript

google-maps

google-maps-api-3

infowindow