gpt4 book ai didi

javascript - 在 Bootstrap 选项卡中加载谷歌地图,修复显示空白

转载 作者:行者123 更新时间:2023-11-30 08:08:35 26 4
gpt4 key购买 nike

更新我已经尝试实现wf的解决方案,但错误仍然存​​在。你可以在这里看一个活生生的例子 --> http://www.opohills.com/taipei-rentals/apollo_a.php

向下滚动并单击“位置”选项卡

我正在尝试在 Bootstrap 选项卡中加载谷歌地图。我遇到了这里讨论的同样问题,并在 SA 广泛讨论——

https://github.com/twitter/bootstrap/issues/2330


解决方法是在单击选项卡时添加回调,以加载 map 。我正在尝试实现这一点,但没有成功。错误仍然存​​在(当只有 1/8 的 map 显示在左上角时。)当我打开检查元素时, map 填满并且工作正常(我猜是因为检查元素正在重新读取 javascript)

下面是我的 javascript,因为这是我第一次真正尝试它,所以我确定我做错了什么 --

  <script type="text/javascript">

var map,
marker = new google.maps.Marker({
position: new google.maps.LatLng(25.041483, 121.553984),
draggable: true,
title: 'Opo Apartment' }),
infoWindow = new google.maps.InfoWindow({content: 'Apollo Apartment'});

$('#location').on('show', function(e) {
if( map == undefined) {

map = new google.maps.Map(
document.getElementById('map-canvas'),
{ zoom: 14,
center: new google.maps.LatLng(25.041483, 121.553984),
mapTypeId: google.maps.MapTypeId.ROADMAP })
}
marker.setMap(map);
infoWindow.open(map, marker);
})

</script>​

你对此有何看法?

最佳答案

我对其进行了修复,但将其保存在不同的 div 中,远离选项卡,并在单击某个选项卡时显示它。可以去同一个站点看代码

$(document).ready(function(){

var map,
marker = new google.maps.Marker({
position: new google.maps.LatLng(25.041483, 121.553984),
draggable: true,
title: 'Opo Apartment' }),
infoWindow = new google.maps.InfoWindow({content: 'Apollo Apartment'});



$('#location').on('show', function(e) {
if( map == undefined) {

map = new google.maps.Map(
document.getElementById('map-canvas'),
{ zoom: 14,
center: new google.maps.LatLng(25.041483, 121.553984),
mapTypeId: google.maps.MapTypeId.ROADMAP })
}
document.getElementById("largemap").style.display="block";

google.maps.event.trigger(map, 'resize');
marker.setMap(map);
infoWindow.open(map, marker);
})
$('.tabclick').on('show', function(e) {
document.getElementById("largemap").style.display="none";

})

})

关于javascript - 在 Bootstrap 选项卡中加载谷歌地图,修复显示空白,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13910443/

26 4 0
文章推荐: javascript - jquery jcarousel 错误 : Uncaught TypeError: Object # has no method 'jcarousel'