谷歌地图模式问题

我试图将谷歌地图显示到Twitter引导模式。 当用户第一次点击按钮Show map他能够成功地看到地图，因为我正在生成地图onclick()函数，但是当他关闭模态并重新打开它时，地图无法正确显示并且90％的部分地图像下面一样变灰

我甚至尝试这种解决方法，删除地图绑定的整个div并重新生成它，但这个技巧不太好用，让我知道如何解决我的问题。

以下是我的js函数，我正在调用show map的事件

 function mapp() { //google.maps.event.trigger(map, "resize"); //$("#map_google_canvas").empty(); $("#map_google_canvas").remove(); $("#crmap").append("
") var myOptions = { center: new google.maps.LatLng(54, -2), zoom: 6, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_google_canvas"), myOptions); var addressArray = new Array("London, United Kingdom", "London Road, Brentwood, United Kingdom", "Brentwood, United Kingdom"); var geocoder = new google.maps.Geocoder(); var markerBounds = new google.maps.LatLngBounds(); for (var i = 0; i < addressArray.length; i++) { geocoder.geocode({ 'address': addressArray[i] }, function (results, status) { if (status == google.maps.GeocoderStatus.OK) { var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); markerBounds.extend(results[0].geometry.location); map.fitBounds(markerBounds); } else { alert("Geocode was not successful for the following reason: " + status); } }); } } 

请帮助，

谢谢

Answer 1

我遇到过同样的问题。 但我发现了模态显示事件的问题。 由于它不能处理某些版本的问题所以我只是按照引导模式文档来实现它。

Bootstrap模态映射问题解决方案：

 $(document).ready(function(){ $('#locationMap').on('shown.bs.modal', function(){ google.maps.event.trigger(map, 'resize'); map.setCenter(new google.maps.LatLng(-33.8688, 151.2195)); }); }); 

最后这对我有用，对某人有帮助。

Answer 2

我正在使用Angular，对我来说，在ui.bootstrap.collapse AngularUI指令上工作的是使用超时。 此指令与模态具有相同的问题，因为在新视图完全加载之前未定义地图大小，并且地图显示为灰色区域。 我所做的是将此代码添加到打开折叠内容的按钮。 也许您可以使用打开模态的按钮使其适应您的情况。

 window.setTimeout(function () { google.maps.event.trigger(map, 'resize') }, 0); 

希望能帮助到你。

Answer 3

如果您使用的是bootstrap 3，则必须执行以下操作：

 function showMap() { var mapOptions = { zoom: 12, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map"), mapOptions); $('#mapmodal').on('shown.bs.modal', function () { google.maps.event.trigger(map, 'resize'); map.setCenter(new google.maps.LatLng(54, -2)); }); $('#mapmodal').modal("show"); } 

还要确保没有为img – tags设置任何max-width或max-height值。 如果您在css样式表中这样做，请将其放在最后：

 #map img{ max-width:none; max-height:none; } 

我不确定是否有必要但是为持有地图的div设置高度值应该是一件好事：

我从几个stackoverflow讨论中汇总了这个。

Answer 4

如果您使用的是Angular，则应使用$ timeout而不是setTimeout 。 将$ timeout设置为0的函数包装将确保在当前执行上下文完成后执行包装函数。 在您的情况下，Google Maps API仅会在模态后重新绘制地图，并且完全呈现包含地图的元素。 你不会看到任何灰色区域。

 $timeout(function () { google.maps.event.trigger(map, 'resize'); map.setCenter(new google.maps.LatLng(53.5085011, -6.2154598);); }, 0); 

Answer 5

visibility:hidden和visibility:visible可用于代替display:none和display:block 。 这对我有用。 您甚至可以为此编辑模态的CSS。

Answer 6

由于您要在未定义的宽度元素中加载地图，因此您可以使用此解决方案。

在使用latlong初始化地图后，您应该在google.maps上触发resize事件

 $('.modal').on('shown', function () { // also redefine center map.setCenter(new google.maps.LatLng(54, -2)); google.maps.event.trigger(map, 'resize'); }) 

Answer 7

感谢user1012181的回答，我解决了这个问题。 我个人也喜欢这个纯CSS解决方案。

 div#myModalMap.modal.fade.in{ visibility: visible; } div#myModalMap.modal.fade{ display: block; visibility: hidden; } 

Answer 8

我也遇到了这个问题并提出了这个简单的解决方案。

等到你的模态完全加载，然后在map函数上设置timeOut事件。

 $('#MyModal').on('loaded.bs.modal',function(e){ setTimeOut(GoogleMap,500); }); 

我非常肯定它会在所有情况下都能解决。

Answer 9

我将使用uiGmapIsReady等待dom准备然后强制地图resize：

 uiGmapIsReady.promise().then(function () { var map = $scope.map.control.getGMap(); google.maps.event.trigger(map, 'resize'); }); 

Answer 10

这就是上面的答案如何帮助，但我不得不使用onclick调用主函数。

  function newMap() 

{

function showMap（）{

 //your map function 

}

  $('#enlargeModal').on('shown.bs.modal', function () { var center = fullmap.getCenter(); google.maps.event.trigger(fullmap, 'resize'); fullmap.setCenter(center); }); 

显示地图（）; }