3

我在 div 内的 Google Map 遇到问题，单击按钮后会在屏幕上弹出。谷歌地图只是部分显示。我知道我需要创建一个调整大小的事件，但不知道如何放置它或放置在哪里。任何帮助将非常感激！请记住，我对JS知之甚少！

链接到测试站点：点击 GOOGLE MAP 按钮查看手头的问题：

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

我的谷歌 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>
4

5 回答 5

2

以下两个解决方案对我有用

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

或者

$(document).ready(function() {
  var myMap;
  $('#myModal').bind('opened', function() {
    if(!myMap) {
      var myMap = initialize();
      google.maps.event.addDomListener(window, 'load', initialize);
    }
  });
});
于 2014-01-09T10:52:48.427 回答
1

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

$(".reveal-modal").on("reveal:opened", function(e) {
  google.maps.event.trigger(map, 'resize')
});
于 2013-01-25T12:54:39.950 回答
1

首先，根据链接到的源，在单击按钮时调用地图的脚本什么都不做，只是抛出一个错误，因为在加载 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()调用并在那里触发调整大小，但在我有限的测试中，这不是必需的。

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

现在去拿创可贴，在那个头上放些冰块。

于 2012-10-25T05:04:06.013 回答
0

尝试这个

<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>
于 2012-10-25T03:05:12.093 回答
0 
$("#myModal").on('shown.bs.modal', function(){
     google.maps.event.trigger(map, 'resize')
});
于 2015-05-18T04:54:21.583 回答