18

我是 JS 新手，已经找到了上一个问题的答案，这带来了一个新问题，又把我带到了这里。

我有一个包含 Google Map API 的显示模式。单击按钮时，会弹出显示模式，并显示 Google 地图。我的问题是只有三分之一的地图正在显示。这是因为需要实现调整大小触发器。我的问题是如何实现 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>

包含谷歌地图的 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 版中的新渲染器版本的发布，调整大小事件不再是Map类的一部分。

该文件指出

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

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

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

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

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

4

5 回答 5

20

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

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

现在：下载解决方案（下次请给我们提供下载/JSFiddle，这样我们就不需要自己创建了）。

希望它有所帮助！

于 2012-10-25T10:05:47.507 回答
11

只需在此处添加

<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>
于 2012-10-24T22:56:23.710 回答
5 
google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
                google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
                    google.maps.event.trigger(map, 'resize');
                });
});
于 2014-03-05T08:31:25.453 回答
3

没有找到如何对最后一个答案发表评论，但是 +1 以获得 Cristiano Fontes 的帮助！有效。就我而言：

<script type="text/javascript">    

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

</script>
于 2013-07-15T19:38:15.257 回答
2

现在， google.maps.event.trigger(map, 'resize') 什么都不做。就像我们在其中包含谷歌地图的 mat-dialog 一样，也存在同样的问题。我找到了一些你可以处理它的方法：

  1. 带有超时的初始化映射。
  2. 在映射初始化后更改父容器的大小，然后将其更改回来。

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

于 2020-08-21T14:26:28.597 回答