javascript - 谷歌地图信息窗口无法正确显示，但当我打开 firbug 时，它运行良好

Question

单击标记时，信息窗口未在我的 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());
}

Answer 1

之前已经解决过这个问题了。当您将 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);
});