动态谷歌地图集成的问题

时间:2010-07-07 15:42:07

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

我在Chrome 5.0.375.99中遇到了一个非常奇怪的Google地图问题: 如果你动态创建多个Maps实例,第二个和on会有一个奇怪的错误,它无法正常显示,只显示在地图空间的一小部分。

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

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

1 个答案:

答案 0 :(得分: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;
            }
        }
    });
});

以上'应该'工作,没有测试过它