我正在为 Google map 使用 javascript API。这很简单，我只有:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(<?php echo $get_music_spot['music_spot_lat'].', '.$get_music_spot['music_spot_lng']; ?>);
var myOptions = {
zoom: 14,
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,
map: map,
title:"<?php echo $get_music_spot['music_spot_title']; ?>"
});
}
</script>
在标题中，然后我有 <div style="width:600px; height:500px; float:left;" id="map_canvas"></div>
在体内实际调用 map 。那我当然有<body onLoad="initialize()">
这基本上就是基本 map 所需的全部内容。但是，因为它在 jQuery 中，例如jQuery UI 选项卡变得一团糟。这是屏幕截图:
您可以看到左上角只显示了 map 的一部分。为什么会发生这种情况，我该如何解决？我将 iFrame 实现为基本嵌入，但这在 IE 中不起作用。
最佳答案
至于为什么它不起作用，我无法告诉你原因。但是请尝试使用 jQuery Tabs 小部件上的事件之一来初始化 map ，例如 show 或 select 事件。
$('#myTabs').tabs({
show: function(event, ui){
// check if is "mappanel" and "map" is empty
if (ui.panel.id == 'mappanel' && $('#map').is(':empty'))
{
// load map
var myOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
}
}
});
重要的是在其中包含一个检查，这样 map 就不会在每次选择 map 选项卡(或任何其他选项卡)时都重新加载。
看到它在这个 jsFiddle 上工作.
关于javascript - 谷歌地图无法在 jQuery UI 选项卡中使用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9756112/