我正在使用Twitter的Bootstrap来定义我的CSS.我创建了一个包含三个选项卡的页面.第二个标签包含使用Google地图构建的地图.但是,当打开页面并使用地图切换到第二页时,地图不会完全呈现.一旦我使用谷歌地图选项卡重新加载页面作为选定的选项卡,地图就会完全加载.
我读了一些帖子,建议有相同问题的人将以下代码添加到javascript:
google.maps.event.addDomListener(window, 'resize', function() {
map.setCenter(homeLatlng);
});
Run Code Online (Sandbox Code Playgroud)
然而,这似乎不是解决方案.请在下面找到完整的代码:
使用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>
Run Code Online (Sandbox Code Playgroud)
HTML: …