Question

是的，我有2个标签，里面有2张地图。当我加载页面时，第一张地图很好，但是当我点击另一个标签时，地图没有全部加载。

在线阅读后，我尝试了这个，但它不会工作。这是js

    function initialize( )
    {
        var latlng = new google.maps.LatLng(51.386199,0.189108);
        var latlng2 = new google.maps.LatLng(51.133802,-0.179009);
        var myOptions =
        {
            zoom: 13,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var myOptions2 =
        {
            zoom: 13,
            center: latlng2,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };


        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        var map2 = new google.maps.Map(document.getElementById("map_canvas_2"), myOptions2);

        var image = 'images/marker.png';

        var myMarker = new google.maps.Marker(
        {
            position: latlng,
            map: map,
            title:"Head Office"
       });

        var myMarker2 = new google.maps.Marker(
        {
            position: latlng2,
            map: map2,
            title:"Crawley & Accounts Office"
        });

    }

    google.maps.event.addDomListener(window, 'load', initialize);

$(document).ready(function() {
$('#tablist a').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
  resetMap(map);
});
function resetMap(m) {
    x = m.getZoom();
    c = m.getCenter();
    google.maps.event.trigger(m, 'resize');
    m.setZoom(x);
    m.setCenter(c);
}
});

Answer 1

您是否尝试在新标签页面打开时重新初始化地图？

$(document).ready(function() {    
      $('#tablist a').click(function(e) {    
        e.preventDefault();   
        $(this).tab('show');  
        initialize();  //Initialize map function
        resetMap(map);
      });

您必须在单击#tablist后隐藏并显示的新选项卡中重新初始化地图。

Answer 2

尝试重新初始化地图

docker run 171329494690.dkr.ecr.us-west-2.amazonaws.com/ecsdemo-redisgeo:latest

Bootstrap选项卡和谷歌地图无法正常工作

2 个答案: