初学JS,找到了上一个问题的答案,又引出了一个新问题,又把我带到了这里。
我有一个包含 Google Map API 的 Reveal Modal。单击按钮时,会弹出 Reveal Modal,并显示 Google map 。我的问题是只显示了 map 的三分之一。这是因为需要实现调整大小触发器。我的问题是如何实现 google.maps.event.trigger(map, 'resize')?我该把这段代码放在哪里?
这是我的测试站点。点击谷歌地图按钮查看手头的问题。 http://simplicitdesignanddevelopment.com/Fannie%20E%20Zurb/foundation/contact_us.html#
显示模型脚本:
<script type="text/javascript">
$(document).ready(function() {
$('#myModal1').click(function() {
$('#myModal').reveal();
});
});
</script>
我的谷歌地图脚本:
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(39.739318, -89.266507),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
</script>
保存 Google map 的 div:
<div id="myModal" class="reveal-modal large">
<h2>How to get here</h2>
<div id="map_canvas" style="width:600px; height:300px;"></div>
<a class="close-reveal-modal">×</a>
</div>
2018-05-22 更新
随着 Maps JavaScript API 3.32 版中新渲染器的发布,调整大小事件不再是 Map
类的一部分。
文档说明
When the map is resized, the map center is fixed
The full-screen control now preserves center.
There is no longer any need to trigger the resize event manually.
来源:https://developers.google.com/maps/documentation/javascript/new-renderer
google.maps.event.trigger(map, "resize");
从版本 3.32 开始没有任何效果
最佳答案
您的源代码实际上存在一些问题。
- 创建了
initialize()
函数,但从未调用过 $(document).ready
应该在我们加载 jQuery 之后调用map
应该是全局变量(如@Cristiano Fontes 所说)而不是var map
- (重要)永远不会调用
click
事件。您正在尝试结合这两种方法 Reveal from Zurb提供打开一个对话框(一个带有 JS,一个只有 HTML)。您需要使用唯一的 JS 方法。 - 您使用了错误的 ID(
#myModal1
从未位于 HTML 中)。
现在:Download the solution (下次请为我们提供下载/JSFiddle,这样我们就不需要自己创建了)。
希望对您有所帮助!
关于javascript - 如何使用 google.maps.event.trigger(map, 'resize' ),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13059034/