我试图让谷歌地图响应并调整大小,同时在窗口调整大小时保持其中心。我阅读了其他堆栈问题,例如:
响应式谷歌地图? https://stackoverflow.com/questions/15421369/responsive-google-map and 将 Google 地图 (V3) 在浏览器调整大小上居中(响应式) https://stackoverflow.com/questions/8792676/center-google-maps-v3-on-browser-resize-responsive
从第二个堆栈问题我得到了一个可以帮助我完成部分代码的链接 http://andrewodendaal.com/keep-google-map-v3-centered-when-browser-is-resized/但我还是没有运气。这是我正在使用的代码,当我调整窗口大小时,地图根本不会调整大小
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(40.5472,12.282715),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
html
<div id="map-canvas"/>
css
html { height: 100% }
body { height: 100%; margin: 0; padding: 0; }
#map-canvas { height: 100%; }
将映射变量移至事件侦听器可以使用它的范围。您正在initialize() 函数中创建地图,以这种方式创建后,其他任何东西都不能使用它。
var map; //<-- This is now available to both event listeners and the initialize() function
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(40.5472,12.282715),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)