加载后如何使用 JavaScript 调整 Google 地图的大小?
Posted
技术标签:
【中文标题】加载后如何使用 JavaScript 调整 Google 地图的大小?【英文标题】:How do I resize a Google Map with JavaScript after it has loaded? 【发布时间】:2010-10-19 02:19:59 【问题描述】:我有一个 'mapwrap' div 设置为 400px x 400px,在里面我有一个 Google 'map' 设置为 100% x 100%。因此地图以 400 x 400 像素加载,然后使用 javascript 我将“mapwrap”的大小调整为屏幕的 100% x 100% - 谷歌地图按照我的预期调整到整个屏幕的大小,但图块在右侧边缘之前开始消失页面。
我可以调用一个简单的函数来使 Google 地图重新调整到更大尺寸的“mapwrap”div 吗?
【问题讨论】:
【参考方案1】:对于 Google Maps v3,您需要以不同方式触发调整大小事件:
google.maps.event.trigger(map, "resize");
请参阅调整大小事件的文档(您需要搜索“调整大小”一词):http://code.google.com/apis/maps/documentation/v3/reference.html#event
更新
这个答案已经在这里很久了,所以一个小演示可能是值得的,虽然它使用了 jQuery,但实际上并没有必要这样做。
$(function()
var mapOptions =
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
;
var map = new google.maps.Map($("#map-canvas")[0], mapOptions);
// listen for the window resize event & trigger Google Maps to update too
$(window).resize(function()
// (the 'map' here is the result of the created 'var map = ...' above)
google.maps.event.trigger(map, "resize");
);
);
html,
body
height: 100%;
#map-canvas
min-width: 200px;
width: 50%;
min-height: 200px;
height: 80%;
border: 1px solid blue;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&dummy=.js"></script>
Google Maps resize demo
<div id="map-canvas"></div>
2018 年 5 月 22 日更新
随着 Maps JavaScript API 3.32 版中的新渲染器版本的发布,调整大小事件不再是 Map
类的一部分。
文档说明
调整地图大小时,地图中心固定
全屏控件现在保留居中。
不再需要手动触发调整大小事件。
来源:https://developers.google.com/maps/documentation/javascript/new-renderer
google.maps.event.trigger(map, "resize");
从版本 3.32 开始没有任何效果
【讨论】:
对于使用 goMap 的任何人,请记住谷歌地图对象可在 $.goMap.map 获得 见this answer by Andrew Hedges 实现方式: 地图在调用它后不会调整大小,直到我用 setTimeout 包裹它。我找到了解决方案here(见评论#46)。 考虑到 v2 现在已弃用,应该选择此答案。 @Tyler Collier 这个事件触发器是通知地图它必须重新绘制自己。您可能正在调整隐藏容器的大小,在这种情况下,是的,缩小和缩小会在超时时起作用。【参考方案2】:如果您使用的是 Google Maps v2,请在调整容器大小后在您的地图上调用 checkResize()
。 link
更新
Google Maps JavaScript API v2 已于 2011 年弃用。它不再可用。
【讨论】:
您能否提供此弃用的链接?我在 Google 地图文档中找不到它。【参考方案3】:流行的答案google.maps.event.trigger(map, "resize");
并不适合我一个人。
这是一个确保页面已加载并且地图也已加载的技巧。通过设置监听器并监听地图的空闲状态,您可以调用事件触发器来调整大小。
$(document).ready(function()
google.maps.event.addListener(map, "idle", function()
google.maps.event.trigger(map, 'resize');
);
);
这是对我有用的答案。
【讨论】:
【参考方案4】:这是完成工作的最佳方式。 它将重新调整您的地图大小。 不再需要检查元素来重新调整地图的大小。 它会自动触发 re-size 事件。
google.maps.event.addListener(map, "idle", function()
google.maps.event.trigger(map, 'resize');
);
map_array[Next].setZoom( map.getZoom() - 1 );
map_array[Next].setZoom( map.getZoom() + 1 );
【讨论】:
【参考方案5】:首先,感谢您指导我并关闭此问题。我从您的讨论中找到了解决此问题的方法。是的,让我们进入正题。 问题是我在 Cakephp3 中使用 GoogleMapHelper v3 助手。当我尝试打开引导模式弹出窗口时,我被地图上的灰色框问题震惊了。已经延长了2天。最后我解决了这个问题。
我们需要更新 GoogleMapHelper 来解决问题
需要在setCenterMap函数中添加如下脚本
google.maps.event.trigger($id, \"resize\");
并且需要在 JavaScript 中包含以下代码
google.maps.event.addListenerOnce($id, 'idle', function()
setCenterMap(new google.maps.LatLng($this->defaultLatitude,
$this->defaultLongitude));
);
【讨论】:
以上是关于加载后如何使用 JavaScript 调整 Google 地图的大小?的主要内容,如果未能解决你的问题,请参考以下文章
JavaScript/JQuery: $(window).resize 调整大小完成后如何触发?