javascript中的谷歌地图标记循环

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

我在谷歌地图上遇到了几乎完全相同的问题。 据我了解（这将解释问题和解决方案），当您单击标记时，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`
                }
            });
    }
})