我遇到了旧的信息窗口循环问题,其中最后一个循环的内容显示在所有信息窗口中。是的,我知道 Stack Overflow 上已经有几个与此相关的问题,但似乎没有一个对我有用。
这是我的 JavaScript:
var map;
var geocoder;
$(function () {
var mapOptions = {
zoom: startZoom,
center: new google.maps.LatLng(startLat, startLng)
}
var marker, i;
$('#map-canvas').height($('#map-canvas').width() / 2);
var mapOptions = {
zoom: startZoom,
center: new google.maps.LatLng(startLat, startLng)
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
if ( ! isAddress && $('#country').val() > 0) {
geocoder = new google.maps.Geocoder();
geocoder.geocode({'address': $('#country').find('option:selected').text()}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
map.fitBounds(results[0].geometry.viewport);
}
});
}
for (i = 0; i < distributors.length; i++) {
var $distributor = distributors[i];
var marker = new google.maps.Marker({
position: new google.maps.LatLng($distributor.latitude, $distributor.longitude),
map: map
});
var infowindow = new google.maps.InfoWindow();
var html = '<div class="container-fluid" style="width: 300px">\
<h1 class="row-fluid">\
'+($distributor.logo ? '<div class="span3"><img src="'+$distributor.logo+'" style="width: 100%"></div>' : '')+'\
<span class="span9">'+$distributor.name+'</span>\
</h1>\
<div class="row-fluid">\
<div class="span6">'+$distributor.address+'<br>'+$distributor.postcode+'</div>\
<div class="span6">'+($distributor.url ? '<a href="'+$distributor.url+'">'+$distributor.url+'</a>' : '')+'<br>'+$distributor.contactNumber+'</div>\
</div>\
</div>';
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(html);
infowindow.open(map, marker);
}
})(marker, i));
}
})
到目前为止我已经尝试过 this answer ,但是提到的变量与我所拥有的不匹配,并且我无法使它们匹配,它只是不起作用。
我也尝试过this answer ,但它没有获得不同的内容,而是删除了除一个标记之外的所有标记。
我做错了什么?有人可以帮我解决这个问题吗?
最佳答案
创建 infoWindow 和 html 对象后尝试此操作:
marker.html = html;
然后像这样构建你的事件监听器:
google.maps.event.addListener(marker, 'click', function () {
infoWindow.setContent(this.html);
infoWindow.open(map, this);
});
关于javascript - Google Maps API 信息窗口都具有相同的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29948926/