相关疑难解决方法(0)

使用Twitter的Bootstrap,Google Maps API V3无法在标签页上进行竞争

我正在使用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: …

javascript jquery google-maps twitter-bootstrap

31
推荐指数
3
解决办法
4万
查看次数