Question

我遇到了一个谷歌地图的问题，我在一个div中，按下按钮，弹出屏幕。谷歌地图只是部分显示。我知道我需要创建一个resize事件，但不知道如何或放在哪里。任何帮助将非常感激！请记住，我对JS知之甚少！

链接到测试网站：点击谷歌地图按钮，看看手上的问题：

http://simplicitdesignanddevelopment.com/Fannie%20E%20Zurb/foundation/contact_us.html#

我的Google API脚本：

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

点击按钮时调用地图的脚本：

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

Answer 1

以下两个解决方案为我工作

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);
  return map;
}

<div id="myModal" class="reveal-modal" data-reveal>
  <div id="map_canvas" style="height: 300px"></div>
  <a class="close-reveal-modal">&#215;</a>
</div>


$(document).ready(function() {
  var myMap;
  $('#myModal').bind('open', function() {
    if(!myMap) {
      var myMap = initialize();
      setTimeout(function() {
        google.maps.event.trigger(myMap, 'resize');
      }, 300);                  
    }
  });
}

OR

$(document).ready(function() {
  var myMap;
  $('#myModal').bind('opened', function() {
    if(!myMap) {
      var myMap = initialize();
      google.maps.event.addDomListener(window, 'load', initialize);
    }
  });
});

Answer 2

首先，基于链接到的源，在按钮单击时调用地图的脚本除了抛出错误之外什么都不做，因为在加载jQuery之前在页面中有它。您可以在错误控制台中看到它。您需要在其余脚本之后将其移动到页面底部。

您的曝光正在“正常”，因为您在菜单项上使用data-reveal-id属性，并且显示脚本会自动连接它。

您正在创建地图onload，这是不好的做法。除非需要，否则不要创建它。

所以要解决你的问题，这就是我所做的。从菜单项中删除data-reveal-id并将其替换为ID，或者您可以使用其他选择器来访问它。我将其更改为id="myModal1"，因为这已经是您在事件代码中的内容了。

移动调用地图的脚本，点击按钮到底部，然后将其更改为如下所示：

$(document).ready(function() {
var map;
$('#myModal1').click(function() {
    if(!map){
        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);          
    }

    $('#myModal').reveal();
});

}）;

仅当用户单击链接以显示地图并且仅创建一次时，才会创建地图。那应该为你解决。如果必须，您可以将打开的回调传递给reveal()调用并触发调整大小，但在我的有限测试中没有必要。

您还可以摆脱整个初始化函数。

现在去拿一个创可贴并在头上放些冰。

Answer 3

在width: 600px;上删除<div id="map_canvas">并在打开模式后触发map上的调整大小应该可以解决问题：

$(".reveal-modal").on("reveal:opened", function(e) {
  google.maps.event.trigger(map, 'resize')
});

Answer 4

试试这个

<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);
    }
    $( document ).bind( "pageshow", function( event, data ){
        google.maps.event.trigger(map, 'resize');               
    }); 
</script>

Answer 5

$("#myModal").on('shown.bs.modal', function(){
     google.maps.event.trigger(map, 'resize')
});

Reveal Modal中的Google Map API未完全显示

5 个答案: