Question

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

出了什么问题???

这是代码 var map;

        $(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>

非常感谢任何帮助。科恩

Answer 1

您可以尝试以下示例代码：

lastCenter=map.getCenter(); 
google.maps.event.trigger(map_canvas, 'resize');
map.setCenter(lastCenter);

Answer 2

对于我的情况，我需要添加延迟以使其正常工作

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

setTimeout(function() {
    map_canvas.setCenter(your_latlng);
}, 100)

调整大小后，Google地图也不会居中

2 个答案: