google.maps.event的问题.触发(地图,“resize")

Issue with google.maps.event.trigger(map, "resize")

本文关键字：resize quot 地图 event maps 问题 触发 google      更新时间：2023-09-26

感谢您的关注。我有这个问题。js是我使用jquery来调整大小的地图画布div。但一旦它已经调整大小，我需要实际的谷歌地图重置其边界，我使用谷歌地图。事件。触发器(地图，"resize")，这里是我的代码，但一旦它触发的div的大小调整，它不能运行的resize地图触发器由于它是未定义的?这是我的。js

// JavaScript Document
// Scripts below in regards to instantiating the google map.
var map;
function initialize() {
var myLatLng = new google.maps.LatLng(-34.1840517,150.7131903);
var mapOptions = {
    zoom: 17,
    center: myLatLng,
    disableDefaultUI: true,
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        position: google.maps.ControlPosition.BOTTOM_LEFT
    }
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
    animation: google.maps.Animation.DROP,
    position: myLatLng,
    map: map,
    title: '6 Station Street, Douglas Park, 2569' 
});
var contentString = '<div id="mapContent">'+'TESTING'+'</div>';
var infowindow = new google.maps.InfoWindow({
    content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
$(function() {
    $("#expand-map").click(function() {
        $("#map-canvas").animate({"height" : "800px"}, 500);
        google.maps.event.trigger(map, "resize");
    });

});

在animate函数回调改变了map-canvas的尺寸后，您只需调用初始化函数来重新绘制地图。

$(function() {
    $("#expand-map").click(function() {
        $("#map-canvas").animate({"height" : "800px"}, 500,function(){
            initialize();
        });
    });
});

看这里:demo jsfiddle

相关文章：