单击标记时,信息窗口未在我的 map 上正确显示。网站在这里。
您还会注意到 map 控件也未正确显示。
var map;
var locations = <?php print json_encode(di_get_locations()); ?> ;
var markers = []
jQuery(function ($) {
var options = {
center: new google.maps.LatLng(51.840639771473, 5.8587418730469),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), options);
for (var i = 0; i < locations.length; i++) {
makeMarker(locations[i]);
}
centerMap();
});
function makeMarker(location) {
var markerOptions = {
map: map,
position: new google.maps.LatLng(location.lat, location.lng)
};
var marker = new google.maps.Marker(markerOptions);
markers.push(marker);
var content = '';
var infowindow = new google.maps.InfoWindow({
content: "test",
size: new google.maps.Size(50, 50),
disableAutoPan: true
});
google.maps.event.addListener(marker, 'click', function (e) {
infowindow.open(map, marker);
});
}
function centerMap() {
map.setCenter(markers[markers.length - 1].getPosition());
}
最佳答案
之前已经解决过这个问题了。当您将 map 加载到“display:none” Canvas 时,Google map 将无法正确显示。 Bootstrap 模态胜利将在开始时隐藏。因此,您必须确保在 Google map 加载完成之前, map Canvas 无法隐藏。
我的解决方法是将 Canvas 移动到用户看不到的位置并将 map 加载到其中。几秒钟(也许 500 毫秒)后,将 map 移动到正确的位置(在您的情况下是模态主体)。
Javascipt:
$(function(){
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
setTimeout(function(){
$('.modal-body').append($("#map").css("margin-top","0px").get(0));
},500);
});
关于javascript - 谷歌地图信息窗口无法正确显示,但当我打开 firbug 时,它运行良好,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25600961/