4

好的，所以我有一个 Jquery Dialog 和一个 Google Maps v3 画布。单击链接时会打开对话框，并且地图以与链接关联的标记为中心。现在，第一次一切正常。地图显示并以标记的位置为中心。当我关闭对话框时，单击另一个链接。地图已显示，但标记位于地图区域之外，即众所周知的左上角。我需要稍微拖动地图以使标记出现。好的，所以我在代码中添加了多个调整大小和 setCenter，但它仍然不起作用。

怎么了？？？

这是代码var映射；

        $(document).ready(function() {

            $("#map_container").dialog({
                autoOpen : false,
                resizable : false,
                resizeStop : function(event, ui) {
                    google.maps.event.trigger(map, 'resize')
                },
                open : function(event, ui) {
                    google.maps.event.trigger(map, 'resize');
                },
                close : function(event, ui) {
                    map = null;
                }
            });

            $(".show_on_map").click(function(e) {

                alert("click");

                var lat = $(this).attr('lat');
                var lng = $(this).attr('lng');
                var placeName = $(this).attr('placeName');
                var placeAddress = $(this).attr('placeAddress');

                initialize(lat, lng);
                plotPoint(lat, lng, placeName, '<span class="gBubble"><b>' + placeName + '</b><br>' + placeAddress + '</span>');

                $("#map_container").dialog("open");

            });

        function plotPoint(srcLat, srcLon, title, popUpContent, markerIcon) {
            var myLatlng = new google.maps.LatLng(srcLat, srcLon);
            var marker = new google.maps.Marker({
                position : myLatlng,
                map : map,
                title : title,
                icon : markerIcon
            });
            var infowindow = new google.maps.InfoWindow({
                content : popUpContent
            });
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map, marker);
            });

                            google.maps.event.trigger(map, 'resize');

            map.setCenter(myLatlng);

        }

        function initialize(lat, lng) {

            var latlng = new google.maps.LatLng(lat, lng);
            var myOptions = {
                zoom : 13,
                center : latlng,
                mapTypeId : google.maps.MapTypeId.ROADMAP
            };

            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            google.maps.event.trigger(map, 'resize');

            map.setCenter(latlng);
        }
</script>

这是DIV。

<div id="map_container" style="width:300px;height:300px;">
        <div id="map_canvas" style="width:250px;height:250px;"></div>
    </div>

任何帮助是极大的赞赏。科恩

4

2 回答 2

19

你可以试试这个示例代码：

lastCenter=map.getCenter(); 
google.maps.event.trigger(map_canvas, 'resize');
map.setCenter(lastCenter);
于 2013-01-29T08:41:09.110 回答
1

就我而言，我需要添加延迟以使其正常工作

google.maps.event.trigger(map_canvas, "resize");

setTimeout(function() {
    map_canvas.setCenter(your_latlng);
}, 100)
于 2016-07-18T07:35:32.317 回答