twitter-bootstrap 谷歌地图模态问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15732427/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google map modal issue
提问by soft genic
I am trying to display google map into the Twitter bootstrap modal.
When user first click on the button Show mapthen he is able to see the map successfuly as i am generating the map onclick()function but when he closes the modal and reopen it then the map doesnot show properly and 90% part of the map goes grey like following
我正在尝试将谷歌地图显示到 Twitter 引导模式中。当用户第一次点击按钮时，Show map他能够成功地看到地图，因为我正在生成地图onclick()功能，但是当他关闭模式并重新打开它时，地图无法正确显示，地图的 90% 部分变为灰色，如下所示
I even try this workaround that remove that whole div in which the map is bind and regenerate it but that trick doesnot work too kindly let me know how can i resolve my issue.
我什至尝试这种解决方法，删除绑定地图的整个 div 并重新生成它，但该技巧不起作用，请让我知道如何解决我的问题。
Following is my js function which i am calling onclick event of show map
以下是我正在调用显示地图的 onclick 事件的 js 函数
function mapp()
{
//google.maps.event.trigger(map, "resize");
//$("#map_google_canvas").empty();
$("#map_google_canvas").remove();
$("#crmap").append("<div id='map_google_canvas'></div>")
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);
}
});
}
}
Kindly help,
请帮助，
Thanks
谢谢
回答by SSR
I had the same issue. but I found an issue with modal shown event. as its not working with some version of issue so I just follow the bootstrap modal documentation to achieve it.
我遇到过同样的问题。但我发现模态显示事件有问题。因为它不适用于某些版本的问题，所以我只是按照引导模式文档来实现它。
Bootstrap Modal Map Issue Solution :
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));
});
});
Finally This works for me, It could help to someone.
最后这对我有用，它可以帮助某人。
回答by Timbergus
I am working with Angular, and what has just worked for me, on the ui.bootstrap.collapseAngularUIdirective is to use a timeout. This directive has the same problem as the modals because the map size is not defined until the new view is fully load, and the map appears with grey zones. What I have done is to add this code to the button that opens the collapsed content. Maybe you can adapt it to your case with the button that opens the modal.
我正在使用 Angular，而刚刚对我ui.bootstrap.collapse有用的 AngularUI指令是使用超时。该指令与模式有相同的问题，因为直到新视图完全加载才定义地图大小，并且地图显示为灰色区域。我所做的是将此代码添加到打开折叠内容的按钮中。也许您可以使用打开模态的按钮使其适应您的情况。
window.setTimeout(function () {
google.maps.event.trigger(map, 'resize')
}, 0);
Hope it helps.
希望能帮助到你。
回答by Jason Saruulo
If you are using bootstrap 3 you have to do this:
如果您使用的是引导程序 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");
}
Also make sure that you did not set any max-width or max-height value to img - tags. If you did so in your css style sheet put this at the end of it:
还要确保您没有为 img - 标签设置任何 max-width 或 max-height 值。如果您在 css 样式表中这样做，请将其放在末尾：
#map img{
max-width:none;
max-height:none;
}
I am not quiete sure whether it is neccessary but setting a height value to the div holding your map should be a good thing:
我不确定是否有必要，但为持有地图的 div 设置高度值应该是一件好事：
<div id="map" style="height:400px"></div>
I assembled this from several stackoverflow discussions.
我从几个stackoverflow讨论中收集了这个。
回答by user1012181
The visibility:hiddenand visibility:visiblecould be used instead of display:noneand display:block. This worked for me. You can even edit the CSS of the modal for this.
该visibility:hidden和visibility:visible可以用来代替display:none和display:block。这对我有用。您甚至可以为此编辑模态的 CSS。
回答by codeepic
If you are using Angular, you should use $timeoutinstead of setTimeout. Wrapping a function with a $timeout set to 0 will ensure that the wrapped function is executed after the current execution context is finished. In your situation Google Maps API will only repaint the map after modal and the element holding the map are fully rendered. You won't see any grey areas.
如果您使用的是 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);
回答by zufrieden
Since you are loading the map in a non-yet-defined width element you have this solution.
由于您在尚未定义的宽度元素中加载地图，因此您有此解决方案。
You should trigger a resize event on google.maps after initialize map with latlong
使用 latlong 初始化地图后，您应该在 google.maps 上触发调整大小事件
$('.modal').on('shown', function () {
// also redefine center
map.setCenter(new google.maps.LatLng(54, -2));
google.maps.event.trigger(map, 'resize');
})
回答by Carlo S
I solved this issue thanks to user1012181 answer. I also personally like this pure CSS solution.
感谢 user1012181 的回答，我解决了这个问题。我个人也喜欢这种纯 CSS 解决方案。
div#myModalMap.modal.fade.in{
visibility: visible;
}
div#myModalMap.modal.fade{
display: block;
visibility: hidden;
}
回答by Peter.Wang
I will use uiGmapIsReady wait the dom ready then force the map resize:
我将使用 uiGmapIsReady 等待 dom 准备好然后强制调整地图大小：
uiGmapIsReady.promise().then(function () {
var map = $scope.map.control.getGMap();
google.maps.event.trigger(map, 'resize');
});回答by Ocool Sanni
well this is how the answers above helped but I had to call the main function using onclick.
好吧，这就是上述答案的帮助方式，但我不得不使用onclick.
<span data-target="#enlargeModal"data-toggle="modal" onclick="newMap()" class="fa fa-expand r"></span>
function newMap()
{
{
function showMap() {
函数 showMap() {
//your map function
}
}
$('#enlargeModal').on('shown.bs.modal', function () {
var center = fullmap.getCenter();
google.maps.event.trigger(fullmap, 'resize');
fullmap.setCenter(center);
});
showMap(); }
显示地图（）; }
回答by Manoz
I also had this issue and came up with this easy solution.
我也遇到了这个问题，并提出了这个简单的解决方案。
Wait until your modal is completely loaded and then set the timeOut event on map function.
等到您的模态完全加载，然后在地图功能上设置超时事件。
$('#MyModal').on('loaded.bs.modal',function(e){
setTimeOut(GoogleMap,500);
});
I am very sure It will work out in all cases.
我非常确定它在所有情况下都会奏效。
