如何使用 google.maps.event.trigger(map, 'resize') [英] How to use google.maps.event.trigger(map, 'resize')

问题描述

我是 JS 新手，找到了上一个问题的答案，这个问题提出了一个新问题，又把我带到了这里.

我有一个包含 Google Map API 的 Reveal Modal.单击按钮时，会弹出显示模式，并显示 Google 地图.我的问题是只有三分之一的地图显示.这是因为需要实现调整大小触发器.我的问题是如何实现 google.maps.event.trigger(map, 'resize')?这段代码应该放在哪里?

这是我的测试站点.单击 Google Map 按钮查看手头的问题.http://simplicitdesignanddevelopment.com/Fannie%20E%20Zurb/foundation/contact_us.html#

显示模型脚本:

我的 Google 地图脚本:

保存谷歌地图的div:

 
<h2>如何到达这里</h2><div id="map_canvas";样式=宽度:600px；height:300px;"></div><a class="close-reveal-modal">&#215;</a>

更新 2018-05-22

随着 Maps JavaScript API 3.32 版中的新渲染器发布，调整大小事件不再是 Map 类的一部分.

文档说明

<块引用>

调整地图大小时，地图中心固定

• 全屏控件现在保留居中.

• 不再需要手动触发调整大小事件.

来源:https://developers.google.com/maps/documentation/javascript/新渲染器

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 中).

现在:下载解决方案(请向我们提供下次有下载/JSFiddle，所以我们不需要自己创建这个).

希望有帮助！

I am new to JS, and have found the answer to a previous question, which brought up a new question, which brought me here again.

I have a Reveal Modal that contains a Google Map API. When a button is clicked, the Reveal Modal pops up, and displays the Google Map. My problem is that only a third of the map is displaying. This is because a resize trigger needs to be implemented. My question is how do I implement the google.maps.event.trigger(map, 'resize')? Where do I place this little snippet of code?

Here is my test site. Click on the Google Map button to see the problem at hand. http://simplicitdesignanddevelopment.com/Fannie%20E%20Zurb/foundation/contact_us.html#

The Reveal Model script:

<script type="text/javascript">
  $(document).ready(function() {
  $('#myModal1').click(function() {
  $('#myModal').reveal();
       });
          });
 </script>

My Google Map 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>

The div which holds the Google Map:

  <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">&#215;</a>
 </div>

UPDATE 2018-05-22

With a new renderer release in version 3.32 of Maps JavaScript API the resize event is no longer a part of Map class.

The documentation states

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.

source: https://developers.google.com/maps/documentation/javascript/new-renderer

google.maps.event.trigger(map, "resize"); doesn't have any effect starting from version 3.32

解决方案

There were actually a couple of problems with your source code.

• The initialize() function is created, but never called
• The $(document).ready should be called after jQuery us loaded
• The map should be a global variable (like @Cristiano Fontes said) and not a var map
• (Important) The click event is never called. You're trying to combine the two methods Reveal from Zurb provides to open a dialog (one with JS, one with only HTML). You need to use the only JS method.
• You're using the wrong ID (#myModal1 is never located in the HTML).

And now: Download the solution (Please provide us with a download/JSFiddle next time, so we don't need to create this ourselves).

Hope it helped!

这篇关于如何使用 google.maps.event.trigger(map, 'resize')的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！