动态谷歌地图集成的问题答案

【问题标题】：Issues with dynamic google maps integration动态谷歌地图集成的问题
【发布时间】：2010-07-07 15:42:07
【问题描述】：

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

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

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

【问题讨论】：

你从哪里得到googleMap 插件？它试图在您的 div 上设置尺寸，但在之后它已经初始化了地图。如果创建的动态地图 div 没有设置宽度或高度，则 GMap 在初始化地图时将没有尺寸可以正常使用。
我从awardwinningfjords.com/2009/07/22/google-maps-with-jquery.html修改了它。用 .each 切换 .css 会得到相同的结果。

标签： javascript html google-maps google-chrome google-maps-api-3

【解决方案1】：

Crescent Fresh 是正确的，因为需要在 div 上初始化新地图之前设置 div 的维度。

要在创建地图 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;
            }
        }
    });
});

上面的“应该”工作，还没有测试过

【讨论】：