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#

Reveal Model脚本：

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

持有Google地图的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类的一部分。

文档说明

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



全屏控制现在保留了中心。



无需再手动触发调整大小事件。

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

从版本3.32开始，

google.maps.event.trigger(map, "resize");没有任何影响

Answer 1

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

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

现在：Download the solution（请在下次向我们提供下载/ 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');
                });
});

Answer 4

没有找到如何留下评论的最后答案，但克里斯蒂亚诺丰特的+1给了帮助！有效。就我而言：

<script type="text/javascript">    

$('div.map-box').hide();
$('li.map').mouseover(function(){
    $('div.map-box').show();
    google.maps.event.trigger(map, 'resize');
});

</script>

Answer 5

像现在一样，google.maps.event.trigger（map，'resize'）不执行任何操作。就像我们在其中包含Google地图的mat-dialog一样，存在相同的问题。我发现了一些处理方法：

具有超时的初始化映射。
在地图初始化后更改父容器的大小，然后将其更改回。

但是对于我来说，所有这些方式都非常糟糕，我正在寻找更好的东西。

如何使用google.maps.event.trigger（地图，＆＃39;调整大小＆＃39;）

5 个答案: