javascript - 动态谷歌地图集成的问题

Question

我在 Chrome 5.0.375.99 中使用 Google map 时遇到了一个非常奇怪的问题:如果您动态创建多个 map 实例，则第二个及以后的 map 实例会出现一个奇怪的错误，它无法正确显示，仅显示在 map 空间的一小部分中。

一些示例页面:
one default - 点击addOne时，新对象出现问题。
none default - 第二次点击addOne时，新对象出现问题。
two default - 两个初始 map 都显示正常，但是当您单击addOne时，新对象出现问题。

真正奇怪的部分是，重新调整窗口大小将强制任何不正确显示的 map 正确显示以自行修复。这让我相信修复它的是重绘事件

Answer 1

Crescent Fresh 是正确的，因为需要在 div 上初始化新 map 之前设置 div 的尺寸。

要在创建 map div 之前设置宽度高度，您可以尝试以下操作:

return this.each(function(){
    var jT = $(this),
            center = new mAPI.LatLng(options.lat, options.long),
            geocoder = new mAPI.Geocoder();

    jT.css({
        'width': hw[0],
        'height': hw[1],
        'margin-left': 'auto',
        'margin-right': 'auto'
    });

    jT.data('map', new mAPI.Map(this, $.extend(options, { center: center })));

    geocoder.geocode({ address: address }, function(results, status) {
        if (status === mAPI.GeocoderStatus.OK && results.length) {
            if (status !== mAPI.GeocoderStatus.ZERO_RESULTS) {
                jT.data('map').setCenter(results[0].geometry.location);
                var dump = new mAPI.Marker({
                        position: results[0].geometry.location,
                        map: jT.data('map')
                });
                return dump;
            }
        }
    });
});

上面的“应该”有效，但还没有测试过