0

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

由于是同一个位置，我不想再次加载地图，而且我无法想象如果有人一次又一次地点击按钮滥用你的系统，这将导致一次又一次地加载谷歌地图。

我使用颜色框来加载更大的地图。现在的问题是较大的地图没有正确调整大小，它有一些灰色区域，并且标记没有居中。我没有足够的声誉来发布图片。图片链接是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" />
4

1 回答 1

0

我有一个类似的问题。希望其他人能够提供更好的解决方案，但我通过在 resize 事件中添加类似这样的内容来解决它：

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

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

于 2013-08-22T16:12:27.127 回答