JavaScript中的Google Maps标记循环

Question

我想在显示带有标记信息的警报时单击它。我将参数作为json接收，而我的问题是单击任何标记时，它始终显示最后一个标记的信息。我不知道问题出在哪里。

 var map = new google.maps.Map(document.getElementById('map'),
                        mapOptions);

                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(function (position) {
                        var userPos = new google.maps.LatLng(position.coords.latitude,
                                position.coords.longitude)
                        var markUsr = new google.maps.Marker({
                            position: userPos,
                            map: map,
                            icon: 'images/locblue.png'
                        });

                        map.setCenter(markUsr.position);
                        for (var i = 0; i < data.length; i++) {
                            var pos = new google.maps.LatLng(data[i].latitud, data[i].longitud)

                            var marker = new google.maps.Marker({
                                position: pos,
                                map: map,
                                icon: 'images/locred.png',
                                description: data[i].desc
                            });

                            var infowindow = new google.maps.InfoWindow({
                                content: data[i].name
                            });

                            infowindow.open(map, marker)
                            google.maps.event.addListener(marker, 'click', function () {
                                alert(marker.description)
                            })
                        }
                    })
                }

Answer 1

我在使用Google地图时遇到了几乎完全相同的问题。据我了解（这将解释问题和解决方案），当您单击标记时，JS实际上会回到调用google.maps.event.addListener的范围。但是，它不存储n（data.length）个不同的marker变量。它只记得最后一个。

要解决这个问题，请在for循环之前创建一个标记列表，并在列表中引用索引，而不只是一个marker变量。将每个标记的索引存储在id属性中以使其保持可用。像这样：

...

map.setCenter(markUsr.position);
var markers = [];
for (var i = 0; i < data.length; i++) {
    var pos = new google.maps.LatLng(data[i].latitud, data[i].longitud);

    markers[i] = new google.maps.Marker({
        position: pos,
        map: map,
        icon: 'images/locred.png',
        description: data[i].desc,
        id: i
    });

    var infowindow = new google.maps.InfoWindow({
        content: data[i].name
    });

    infowindow.open(map, markers[i]);
    google.maps.event.addListener(markers[i], 'click', function () {
        alert(markers[this.id].description)
    })
}

...

有时JS可能很不直观，但这就是我解决的方法。

作为旁注，您缺少几个分号。

Answer 2

JS允许我在forEach中执行此操作。每次我尝试将标记功能分解为自己的功能时，我都会在地图上得到0个结果。在具有标记功能的自己的功能中，并通过for循环调用它不起作用的地方，这以某种方式神奇地起作用。我真的不知道该怎么办，但以为我会分享另一个解决方案。这为我在同一张地图上绘制了200多个点：）

dataSet.forEach((item, index) => {
    coords = {lat:item[2], lng:item[3]}
    if(item[1] > 500){
        color = 'red';
        var marker = new google.maps.Marker({
                position: coords,
                map:map,
                icon: {
                url: `http://maps.google.com/mapfiles/ms/icons/${color}-dot.png`
                }
            });
    }
    else if((item[1] < 500) && (item[1] > 100)){
        color = 'pink';
        var marker = new google.maps.Marker({
                position: coords,
                map:map,
                icon: {
                url: `http://maps.google.com/mapfiles/ms/icons/${color}-dot.png`
                }
            });
    }
    else{
        color = 'blue';
        var marker = new google.maps.Marker({
                position: coords,
                map:map,
                icon: {
                url: `http://maps.google.com/mapfiles/ms/icons/${color}-dot.png`
                }
            });
    }
})