[英]Google Map info window is only showing on one marker in JavaScript
我正在开发一个提供基于位置的服务的网站。 所以我使用JavaScript将我的网站与Google Map API集成。 然后我将数据导入Map并在Map上将每个项目显示为标记。 在地图上导入和显示数据作为标记工作正常。
但是我在地图上显示每个标记的信息窗口时遇到问题。 问题是我的地图上有两个标记,但是当我点击任何项目时,信息窗口始终显示在同一个项目上。 请参阅下面的屏幕截图。
正如您在屏幕截图中看到的,我点击了右侧的标记,但信息窗口显示在不同的项目上。
这是我对地图的完整JavaScript:
var map;
function initialize() {
var lat = $('.region-latitude').val();
var long = $('.region-longitude').val();
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: new google.maps.LatLng(lat, long),
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var script = document.createElement('script');
script.src = $('.map-items-url').val();
document.getElementsByTagName('head')[0].appendChild(script);
}
window.items_callback = function (results) {
for (var i = 0; i < results.features.length; i++) {
var coords = results.features[i].geometry.coordinates;
var latLng = new google.maps.LatLng(coords[0], coords[1]);
var itemMarker = new google.maps.Marker({
position: latLng,
map: map,
title: results.features[i].name
});
var contentString = '<h3>' + results.features[i].name + '</h3>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
itemMarker.addListener('click', function () {
infowindow.open(map, itemMarker);
});
}
}
google.maps.event.addDomListener(window, 'load', initialize)
我的代码出了什么问题? 如何为每个标记显示不同的信息窗口?
这看起来像是一个范围问题。 目前,当click
处理程序被激活时, itemMarker
指向最后添加的标记以及infowindow
点,最后的信息窗口中创建。 这就是为什么它总是只显示最后添加的标记。 您必须创建一个封装这些变量的范围。
尝试这个:
for (var i = 0; i < results.features.length; i++) {
(function(index){
var coords = results.features[index].geometry.coordinates;
var latLng = new google.maps.LatLng(coords[0], coords[1]);
var itemMarker = new google.maps.Marker({
position: latLng,
map: map,
title: results.features[index].name
});
var contentString = '<h3>' + results.features[index].name + '</h3>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
itemMarker.addListener('click', function () {
infowindow.open(map, itemMarker);
});
})(i);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.