谷歌地图标记循环的JavaScript [英] google maps marker loop in javascript

问题描述

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

I want to display an alert with the marker info when I click on it. I receive the parameters as a json and my problem is when I click any marker, it is always displaying the info of the last marker. I don´t know where the problem can be.

 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)
                            })
                        }
                    })
                }

推荐答案

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

I had almost the exact same problem with Google Maps. As far as I understand (which would explain the problem and solution), when you click a marker, JS essentially goes back to the scope of wherever google.maps.event.addListener is called. However, it doesn't store n (data.length) different marker variables. It just remembers the last one.

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

To solve this, create a list of markers before the for loop, and reference indices in the list instead of just one marker variable. Store the index of each marker in an id property to keep it available. Like this:

...

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可能很不直观，但这就是我解决的方式.

Sometimes JS can be very unintuitive, but this is how I solved it.

请注意，您缺少几个分号.

As a side note, you were missing a couple of semicolons.

这篇关于谷歌地图标记循环的JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！