Question

我在我的数据库中存储纬度和经度并提取我在我的页面中嵌入谷歌地图但是当页面加载地图仅显示在div容器的左上角时，即仅显示div容器的第四部分，以及另一部分是空白的。但是当我按F12检查代码（Firebug）时，它将完全显示。

这是我的代码。

jQuery(document).ready(function () {
    var mapOptions = {
        center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
        zoom: 16,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var infoWindow = new google.maps.InfoWindow();
    var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
    $(function () {
        $('#dvMap').on('shown', function () {
            google.maps.event.trigger(map, "resize");
        });
    });
    //google.maps.event.addDomListener(map, 'resize', function(){
    //    alert('div resize');
    //    google.maps.event.trigger(map,'resize');
    for (i = 0; i < markers.length; i++) {
        var data = markers[i]
        var myLatlng = new google.maps.LatLng(data.lat, data.lng);
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: data.title
        });
        (function (marker, data) {
            google.maps.event.addListener(marker, "click", function (e) {
                infoWindow.setContent(data.description);
                infoWindow.open(map, marker);
            });
        })(marker, data);
    }
});

任何人都可以解决这个问题吗？

Answer 1

我以前遇到过这个问题。诀窍是在调用Map函数之前设置div的宽度和高度：

<div id="dvMap" style="width:500px;height:500px;"></div>

谷歌地图没有完全加载

1 个答案: