google 在 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

我在使用 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`
                }
            });
    }
})

google 在 javascript 中映射标记循环

google maps marker loop in javascript

javascript

marker