我想点击它时显示带有标记信息的提醒。我收到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)
})
}
})
}
答案 0 :(得分:6)
我与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可能非常不直观,但这就是我解决它的方法。
作为旁注,你错过了几个分号。
答案 1 :(得分:0)
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`
}
});
}
})