Question

谷歌地图有一个奇怪的问题，我只能在Firefox中复制。为了解释，我们有一个静态地图，当点击时会放大到一个完整的可交互地图，中心有一个标记。这适用于除Firefox之外的所有浏览器。在Firefox中，会发生什么是地图未正确居中。放置标记，但它位于地图的左上角，就在可见区域之外。

有什么想法吗？这让我困惑了一段时间。

JavaScript：

// lat and lng are initialized earlier
var latlng = new google.maps.LatLng(lat, lng);
var myOptions = {
    zoom: 13,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
};

var map = new google.maps.Map($("#map_canvas")[0], myOptions);

var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    icon: icon
});

var resizeMap = function () {
    $("#smallMap, #smallMapOverlay").remove();
    $("#map_canvas").show();
    google.maps.event.trigger(map, 'resize');
    map.setCenter(latlng, 13);
};

$("#smallMapOverlay").live("click", function (e) {
    e.preventDefault();
    resizeMap();
});

CSS：

#map_canvas {
    width: 640px;
    height: 377px; 
}

Answer 1

似乎将resize和setCenter方法放入show()的回调中，并且稍微延迟就可以解决问题。

var resizeMap = function () {
    $("#smallMap, #smallMapOverlay").remove();
    $("#map_canvas").show(10, function () {
        google.maps.event.trigger(map, 'resize');
        map.setCenter(latlng, 13);
    });
};

这不是最优雅的解决方案，但它确实有效。

Answer 2

Karim79＆＃39;修复工作。我用稍微不同的方式解决了这个问题。如果你有一个包装类来处理映射函数，你可以创建一个像这样的重置函数，

function reset(){
        setTimeout(function(){gm.event.trigger(_gMap, 'resize');}, 50);
        setTimeout(function(){_gMap.setCenter(settings.mapOptions.center);}, 100);
    }

最佳

谷歌地图不以Firefox为中心

2 个答案: