Google Maps API V3 未使用 Twitter 的 Bootstrap 在选项卡式页面上竞争性呈现
Google Maps API V3 not rendering competely on tabbed page using Twitter's Bootstrap
我正在使用Twitter的Bootstrap来定义我的CSS。我制作了一个包含三个选项卡的页面。第二个选项卡包含使用谷歌地图构建的地图。但是,当打开页面并切换到带有地图的第二页时,地图不会完全呈现。一旦我重新加载带有谷歌地图选项卡的页面作为所选选项卡,地图就会完全加载。
我读过一些帖子,建议有相同问题的人将以下代码添加到javascript中:
google.maps.event.addDomListener(window, 'resize', function() {
map.setCenter(homeLatlng);
});
然而,这似乎不是解决方案。请在下面找到完整的代码:
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:
<div class="tab-pane" id="orange" style="background-color:#E3F2FF;">
<div id="map_canvas" style="width:780px; height:400px; overflow:;"></div>
</div>
我该如何解决这个问题?也许我可以添加一些 javascript 来重新加载谷歌地图部分,一旦选择选项卡,但我不知道该怎么做......
更新的代码仍显示错误:
<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>
我也在与这个问题作斗争。我使用的是模态形式,它在隐藏时渲染了地图。显示选项卡时,需要触发以下代码:
google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );
希望它对您有用。如果这不起作用,这是我找到解决方案的链接。也许会有另一个有用的评论。
http://code.google.com/p/gmaps-api-issues/issues/detail?id=1448
这里有很多解决方案,坦率地说,他们都错了。如果您必须劫持 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();
});
您可以在此引导中看到一个工作示例:http://www.bootply.com/102241
注意:如果您的界面仍然出现故障,则可能是此问题:谷歌地图API V3:奇怪的UI显示故障(带屏幕截图)
使用最新的 gmaps api,您只需将其添加到您的样式中:
.gm-style img { max-width: none; }
.gm-style label { width: auto; display: inline; }
测试不同的延迟后对我有用:
$(window).resize(function() {
setTimeout(function() {
google.maps.event.trigger(map, 'resize');
}, 300)
});
希望对您有所帮助。
我已经通过使用解决了这个问题
google.maps.event.trigger(map, 'resize');
在引导选项卡的显示函数中.js表示在显示框时,您应该触发调整大小事件并将起作用。
编辑:我看到了另一个具有相同答案的链接Google Maps API v3, jQuery UI Tabs, map not resize我在解决问题后看到了这个链接,以找出仍未回答的原因,为什么调整大小事件不适用于选项卡的单击事件,但在选项卡 js 中有效
对我来说很好用,我使用 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);
从这个链接 https://code.google.com/p/gmaps-api-issues/issues/detail?id=1448
要在隐藏的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>
对我来说,它的工作原理是在模态显示之后调用渲染地图的函数。
我所要做的就是:
$(document).on("shown", "#eventModal", function(){
bindMap(coordinates);
});
您可以对选项卡执行相同的操作,因为它们还具有"显示"事件。
- 我的单元测试选项是什么
- 如何更改bigquery API中的计费层选项
- 使用Javascript获取所选选项ID
- Selectize.js:如何对整数值的选项进行排序
- 通过js在新选项卡中有条件地打开url
- 按照选项卡索引的顺序循环一个jQuery选择
- 如何在使用selectBoxIt JQuery插件时检测选项更改
- 无法在Ionic select中预先选择最后一个选项
- 如何在选项卡上定义属性'的主窗口对象
- 为什么grunt contrib connect的中间件选项的第三个参数是未定义的
- 使用此选项选择父类内部的类
- CKeditor:更改对话框中的默认选择选项
- JQuery覆盖不更改单选选项
- 活动选项卡's源代码-获取变量s值
- 绑定时将Parsley minlength消息作为选项传递时,未对其进行自定义
- 如何从选择框中的选项中获取属性值
- 如何在从多选下拉列表中选择选项值时动态生成文本框
- React Native通过Navigator将用户输入数据传递到选项卡栏IOS中的组件
- 如何从外部页面激活非默认引导选项卡
- Google Maps API V3 未使用 Twitter 的 Bootstrap 在选项卡式页面上竞争性呈现