Javascript Google Maps API V3 无法在使用 Twitter 的 Bootstrap 的选项卡式页面上完全呈现
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10197128/
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 Maps API V3 not rendering competely on tabbed page using Twitter's Bootstrap
提问by TrendyT
I'm using Twitter's Bootstrap for defining my CSS. I have made a page with three tabs. The second tab contains a map built with Google Maps. However when opening the page and switching to the second page with the map, the map is not rendered completely. Once I reload the page with the google maps tab as the selected tab the map loads entirely.
我正在使用 Twitter 的 Bootstrap 来定义我的 CSS。我制作了一个包含三个标签的页面。第二个选项卡包含使用 Google 地图构建的地图。但是，当打开页面并切换到带有地图的第二页时，地图并未完全呈现。一旦我使用谷歌地图选项卡重新加载页面作为所选选项卡，地图将完全加载。
I read some posts that advised people with the same problem to add the following code to the javascript:
我阅读了一些建议有同样问题的人将以下代码添加到 javascript 的帖子：
google.maps.event.addDomListener(window, 'resize', function() {
map.setCenter(homeLatlng);
});
However this doesn't seem to be the solution. Please find the complete code below:
然而，这似乎不是解决方案。请在下面找到完整的代码：
Javascript:
Javascript：
<script type="text/javascript">
function initialize() {
google.maps.event.addDomListener(window, 'resize', function() {
map.setCenter(homeLatlng);
});
var myLatlng = new google.maps.LatLng(37.4419, -122.1419);
var myOptions = {
zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
downloadUrl("data.xml", function(data) {
var markers = data.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = new google.maps.Marker({position: latlng, map: map});
}
});
}
</script>
HTML:
HTML：
<div class="tab-pane" id="orange" style="background-color:#E3F2FF;">
<div id="map_canvas" style="width:780px; height:400px; overflow:;"></div>
</div>
How can I resolve this? Maybe I can add some javascript that reloads the google maps part once the tab is selected but I don't know how to do this....
我该如何解决这个问题？也许我可以添加一些 javascript 来在选择选项卡后重新加载谷歌地图部分，但我不知道如何执行此操作....
Updated code still shows the error:
更新后的代码仍然显示错误：
<div class="tab-pane" id="orange" style="background-color:#E3F2FF;">
<div id="map_canvas" style="width:780px; height:400px; overflow:;"></div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="util.js"></script>
<script type="text/javascript">
function initialize() {
google.maps.event.addDomListener(window, 'resize', function() {
map.setCenter(homeLatlng);
});
var myLatlng = new google.maps.LatLng(37.4419, -122.1419);
var myOptions = {
zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
downloadUrl("data.xml", function(data) {
var markers = data.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = new google.maps.Marker({position: latlng, map: map});
}
});
map.checkResize();
}
</script>
</div>
回答by Theo
I was battling with this issue as well. I was using a modal form and it rendered the map when it was hidden. When the tab is shown, you need to trigger this code:
我也在与这个问题作斗争。我使用的是模态表单，它在隐藏时渲染了地图。显示选项卡时，您需要触发此代码：
google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );
Hopefully it will work for you. If that doesn't work, here is the link where I found the solution. Maybe there will be another helpful comment.
希望它对你有用。如果这不起作用，这是我找到解决方案的链接。也许会有另一个有用的评论。
http://code.google.com/p/gmaps-api-issues/issues/detail?id=1448
http://code.google.com/p/gmaps-api-issues/issues/detail?id=1448
回答by Archonic
There's a lot of solutions here and frankly they're all wrong. If you have to hi-Hyman the default functionality of Bootstrap tabs, you might as well not use Bootstrap tabs. If you're only calling resize after the tab is shown, you may still have issues with the GMaps interface (zoom level and such). You simply have to initialize the map after the tab is visible.
这里有很多解决方案，坦率地说它们都是错误的。如果您必须劫持 Bootstrap 选项卡的默认功能，则最好不要使用 Bootstrap 选项卡。如果您仅在显示选项卡后调用调整大小，则 GMaps 界面（缩放级别等）可能仍然存在问题。您只需在选项卡可见后初始化地图。
var myCenter=new google.maps.LatLng(53, -1.33);
var marker=new google.maps.Marker({
position:myCenter
});
function initialize() {
var mapProp = {
center:myCenter,
zoom: 14,
draggable: false,
scrollwheel: false,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("map-canvas"),mapProp);
marker.setMap(map);
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map, marker);
});
};
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
initialize();
});
You can see a working example in this bootply: http://www.bootply.com/102241
你可以在这个 bootply 中看到一个工作示例：http: //www.bootply.com/102241
Note:if your interface is still glitchy, it could be this issue: Google Maps API V3 : weird UI display glitches (with screenshot)
注意：如果您的界面仍然出现故障，则可能是这个问题： Google Maps API V3：奇怪的 UI 显示故障（附截图）
Using the most recent gmaps api, you just need to add this to your styling:
使用最新的 gmaps api，您只需要将其添加到您的样式中：
.gm-style img { max-width: none; }
.gm-style label { width: auto; display: inline; }
回答by Cyril Jacquart
Works for me after testing different delays :
测试不同的延迟后对我有用：
$(window).resize(function() {
setTimeout(function() {
google.maps.event.trigger(map, 'resize');
}, 300)
});
Hope it helps.
希望能帮助到你。
回答by anku_radhey
I have solved the problem by using
我已经通过使用解决了这个问题
google.maps.event.trigger(map, 'resize');
inside show function in bootstrap-tab.jsmeans at the time of showing the box you should trigger resize event and will work..
bootstrap-tab.js 中的show 函数内部意味着在显示框时您应该触发调整大小事件并且将起作用..
Edit:I have seen another link with the same answer Google Maps API v3, jQuery UI Tabs, map not resizingI have seen this link after solving the problem to find out the reason which is still unanswered that why resize event does not works on the click event of the tabs but works in the tab js
编辑：我已经看到了同样的答案另一个链接 谷歌地图API V3，jQuery UI的标签，映射不调整我已经看到解决问题，找出这仍然是悬而未决，之所以调整大小事件不工作的原因后，此链接选项卡的单击事件，但在选项卡 js 中有效
回答by Karim Samir
this works fine for me, I use jquery tabs
这对我来说很好用，我使用 jquery 选项卡
setTimeout(function() {
google.maps.event.trigger(map, "resize");
map.setCenter(new google.maps.LatLng(default_lat, default_lng));
map.setZoom(default_map_zoom);
}, 2000);
from this link https://code.google.com/p/gmaps-api-issues/issues/detail?id=1448
从这个链接https://code.google.com/p/gmaps-api-issues/issues/detail?id=1448
回答by Memonic
To show a google maps in a hidden div, the div must show before the map is created and loaded. Below is an example:
要在隐藏的 div 中显示谷歌地图，该 div 必须在创建和加载地图之前显示。下面是一个例子：
<div id="map_canvas" style="width:500px; height:500px"></div>
<script>
$(document).ready(function(){
$('#button').click(function() {
$('#map_canvas').delay('700').fadeIn();
setTimeout(loadScript,1000);
});
});
function initialize() {
var title= "Title";
var lat = 50;
var lng = 50;
var myLatlng = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
title:artTitle
});
// To add the marker to the map, call setMap();
marker.setMap(map);
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);
}
</script>
回答by Juliana
For me, what it worked was to call the function that renders the map after the, in my case, the modal had shown.
对我来说，它的作用是调用在我的情况下显示模态之后渲染地图的函数。
All I had to do was:
我所要做的就是：
$(document).on("shown", "#eventModal", function(){
bindMap(coordinates);
});
You can do the same with the tabs, because they also have a "shown" event.
您可以对选项卡执行相同操作，因为它们也有一个“显示”事件。
