[英]Issue placing InfoWindows on Google Map markers
我正在尝试使用JSON将多个标记放置在Google Map上,并将InfoWindows绑定到每个标记。 不幸的是,仅出现一个标记,它是JSON中的最后一个值。 没有其他标记会显示,并且漫画气球样式的箭头不会出现在InfoWindow的后面。 已经尝试了很长时间来解决此问题,但似乎没有任何效果。
这是代码:
var stories = {{story_Json|safe}};
var map;
function loadMarkers(stories){
for (i=0;i<stories.length;i++) {
var story = stories[i];
var point = new google.maps.LatLng(story.latitude, story.longitude);
var marker = new google.maps.Marker({position: point, map: map});
var infowindow = new google.maps.InfoWindow({
content: '<div >'+
'<div >'+
'</div>'+
'<h2 class="firstHeading">'+story.headline+'</h2>'+
'<div>'+
'<p>'+story.copy+'</p>'+
'</div>'+
'</div>'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
}
function mainMap(position)
{
// Define the coordinates as a Google Maps LatLng Object
var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
// Prepare the map options
var mapOptions =
{
zoom: 15,
center: coords,
mapTypeControl: false,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Create the map, and place it in the map_canvas div
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
// Place the initial marker
var marker = new google.maps.Marker({
position: coords,
map: map,
title: "Your current location!"
});
loadMarkers(stories);
}
对这些问题的任何见解都将受到赞赏。
InfoWindow使用i的最后一个值保留引用(自循环结束以来,我们看到了JSON的最后一个值)。 这与Javascript中的函数作用域有关,而不是与块作用域有关。
获得预期结果的一种方法是引入一个新story
以引用每个信息窗口的故事的每个值。 这可以通过新的匿名函数作用域来完成:
function loadMarkers(stories){
for (i=0;i<stories.length;i++) {
var story = stories[i];
(function(story) {
var point = new google.maps.LatLng(story.latitude, story.longitude);
var marker = new google.maps.Marker({position: point, map: map});
var infowindow = new google.maps.InfoWindow({
content: '<div >'+
'<div >'+
'</div>'+
'<h2 class="firstHeading">'+story.headline+'</h2>'+
'<div>'+
'<p>'+story.copy+'</p>'+
'</div>'+
'</div>'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,this);
});
})(story);
}
}
忘记了信息窗口箭头,它显示不正确,如模糊或变形吗? 也许这是CSS事情,添加这些行可能会对您有所帮助。
#map_canvas label { width: auto; display:inline; }
#map_canvas img { max-width: none; max-height: none; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.