Question

我有一个带有标记的谷歌地图。每个标记都有一个与之关联的信息框。需要填充信息框的信息是通过ajax调用获取的。问题是，在选择了一个进行ajax调用的标记之后，如果成功完成，每当您刷新/重新加载页面时，Google Map只是一个灰色框。

var map, markers = [];
var initMap = function (latitude, longitude) {
    var coords = new google.maps.LatLng(parseFloat(latitude), parseFloat(longitude));
    var mapOptions = {
        zoom: 8,
        minZoom:2,
        center: coords,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scaleControl: true
     }
     map = new google.maps.Map(document.getElementById('search-map'), mapOptions)
};
var infowindow = new google.maps.InfoWindow({
    maxWidth: 350,
    shadowStyle: 1,
    padding: 0,
    backgroundColor: 'rgb(57,57,57)',
    borderRadius: 4,
    arrowSize: 10,
    borderWidth: 1,
    borderColor: '#2c2c2c',
    arrowPosition: 30,
    arrowStyle: 2
});
var contentString = "stuff"
for(var i = 0; i < markers.length; i++) {
    var marker = new google.maps.Marker({
        position: markers[i][0],
        map: map,
        icon: markers[i][1]
    })
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            $.post($(ajaxURL, userIdObj, function(response) {
                infowindow.close();
                infowindow.setContent(contentString);
                infowindow.open(map, marker);
            })
        }
    })(marker, i));
}

Answer 1

我也遇到过这种情况，但在绘制地图之后，你只需要用

之类的东西来调整它

$('google-map').resize();

使其可见。

Answer 2

所以，只需快速更新。在完成这项任务时，我实际上经历了两种类型的＆＃34;灰色框。＆＃34; 在那里我可以看到底部的谷歌徽标和我无法看到的徽标。如果你可以在底部看到谷歌徽标，如上所述，你必须调整大小。这些内容：google.maps.event.trigger(map, 'resize'); 如果您在灰色框中看不到任何内容，则很可能是您初始化地图的功能问题，特别是center:new google.maps.LatLng(39.739318, -89.266507)

刷新页面后，灰色框而不是谷歌地图

2 个答案: