Bootstrap 模态中的谷歌地图位置总是被地图大小宽度和高度关闭答案

【问题标题】：Google Maps position inside Bootstrap modal is always off by the map size width and heightBootstrap 模态中的谷歌地图位置总是被地图大小宽度和高度关闭
【发布时间】：2016-12-21 16:14:01
【问题描述】：

首先，这是一个 jsFiddle：http://jsfiddle.net/WppF6/168/

当我在模态框内启动地图时，它总是向下和向右偏离窗口像素的大小 (300x300)。如果您随后向上和向左滚动，您会在那里看到标记 - 基本上它没有按应有的中心居中。

坐标是正确的，如果它在模态框之外，它可以正常工作。

我认为它与加载地图之前的 div 加载有关，然后它居中错误，但我不知道为什么会这样。我试图把它放在代码的末尾，但它不起作用：

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

任何想法我做错了什么？

它应该是这样的：

以及它的错误之处：

请注意，坐标并不总是相同的，所以如果有一个解决方案不需要坐标来重新居中地图（或首先将其加载到适当的大小），那将是首选。

【问题讨论】：

编辑缩放级别或中心？

标签： javascript jquery twitter-bootstrap google-maps google-maps-markers

【解决方案1】：

我有一些类似的问题，除了我的问题与多个点有关。初始化地图后尝试启动它。

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
map.fitBounds(new google.maps.LatLngBounds(
    new google.maps.LatLng(lat-50, lng-50),
    new google.maps.LatLng(lat+50, lng+50)
));

这里的 lat 和 lng 是你的坐标。它的作用是根据给定的边界聚焦地图。第一个参数是左下角，下一个参数是右上角。

【讨论】：

【解决方案2】：

您可以将中心点保存到一个变量并在模态触发时设置它

map.setCenter(results[0].geometry.location);
      center = results[0].geometry.location;

然后

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

见http://jsfiddle.net/k0odnn80/

【讨论】：