如何使用google.maps.event.trigger(map,'resize')

Question

我是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#

显示模型脚本:

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

我的Google地图脚本:

<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>

持有谷歌地图的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">&#215;</a>
 </div>

更新2018-05-22

使用Maps JavaScript API版本3.32中的新渲染器版本,resize事件不再是Map类的一部分.

文件说明

调整地图大小后,地图中心将固定

• 全屏控制现在保留了中心.

• 不再需要手动触发resize事件.

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

google.maps.event.trigger(map, "resize"); 从版本3.32开始没有任何影响

Answer 1

您的源代码实际上存在一些问题.

• 该initialize()函数已创建,但从未调用过
• 本$(document).ready应jQuery的我们加载后调用
• 本map应是一个全局变量(如@Cristiano丰特斯说),而不是一var map
• (重要)click永远不会调用该事件.您正在尝试将Zurb提供的两种方法Reveal结合起来打开一个对话框(一个用JS,一个只用HTML).您需要使用唯一的JS方法.
• 您使用的是错误的ID(#myModal1从不在HTML中).

现在:下载解决方案(请在下次向我们提供下载/ JSFiddle,因此我们不需要自己创建).

希望它有所帮助!

Answer 2

只需在此处添加即可

<script type="text/javascript">
  $(document).ready(function() {
  $('#myModal1').click(function() {
  $('#myModal').reveal();
  google.maps.event.trigger(map, 'resize');
       });
          });
 </script>

但是你需要将地图作为全局变量,所以在这里丢失var

<script type="text/javascript">
   function initialize() {
     var mapOptions = {
      center: new google.maps.LatLng(39.739318, -89.266507),
      zoom: 5,
      mapTypeId: google.maps.MapTypeId.ROADMAP
     };
 --> map = new google.maps.Map(document.getElementById("map_canvas"),
   mapOptions);
 }

 </script>

Answer 3

google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
                google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
                    google.maps.event.trigger(map, 'resize');
                });
});