Question

我要做的是，默认显示一个小的谷歌地图，当用户点击一个按钮时，它会显示一个更大的地图。

由于位置相同，我不想再次加载地图，我也无法想象如果有人通过反复点击按钮滥用您的系统，这将导致再次加载谷歌地图再一次。

我使用colorbox加载更大的地图。现在的问题是较大的地图没有正确调整大小，有一些灰色区域，标记不居中。我没有足够的声誉来发布图片。图片链接为http://postimg.org/image/g3i9pxns1/。谢谢你们！

<script type='text/javascript'>
    var goo = google.maps, mapcenter = new goo.LatLng(52.5498783, 13.425209099999961)
    function initialize() {
        mapOptions = {
            zoom: 14,
            center: mapcenter,
            mapTypeId: goo.MapTypeId.ROADMAP,
            disableDefaultUI: true
        },
        map = new goo.Map(document.getElementById('map_canvas'),
                mapOptions),
        marker = new goo.Marker({
            map: map,
            position: map.getCenter()
        });

        $('#fancybutton').colorbox({
            inline: true, href: "#map_canvas", width: 800,
            height: 600,
            onOpen: function (a, z) {
                goo.event.trigger(map, 'resize');
                map.setOptions({
                    disableDefaultUI: false,
                    center: mapcenter
                })
                map.setCenter(mapcenter);
            },

            onLoad: function (a) {
                goo.event.trigger(map, 'resize');
                map.setOptions({
                    center: mapcenter
                })
            },
            onClose: function () {
                goo.event.trigger(map, 'resize');
            }
        });
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>

HTML：

<div style="width:200px;height:200px">
    <div id="map_canvas" style="width:100%;height:100%"></div>
</div>
<input type="button" id="fancybutton" value="open fancybox" />

Answer 1

我有类似的问题。希望其他人能够使用更好的解决方案，但我通过在resize事件中添加这样的东西来解决它：

map.panBy(1,1);
setTimeout(function(){map.panBy(-1,-1);},250);

它将地图移动一个像素，然后再移回，并应加载丢失的图块。

为什么我的谷歌地图调整大小不起作用？

1 个答案: