Question

我正在使用Google Maps JavaScript API v3，我想在同一页面的三个标签上显示三个地图。如果我在选项卡上显示所有地图默认一切正确，但是当我尝试在每个选项卡中加载每个地图时，只有在默认选项卡中显示的地图才能正常工作，其他两个地图不会显示。

我一直在寻找有关此问题的任何错误或信息，我发现如果我在尝试访问选项卡时调整地图大小，这样可以正常工作，但对我来说，效果不好：（< / p>

所以，我不知道发生了什么。我没有使用Bootstrap。

Javascript代码

    function initMap() {
        var mapOptions = {
            center: new google.maps.LatLng(40.0504, -3.3240),
            zoom: 6,
            mapTypeId: 'terrain'
        };
        var mapOptions2 = {
            center: new google.maps.LatLng(39.3204, 2.8240),
            zoom: 7,
            mapTypeId: 'terrain'
        };
        var mapOptions3 = {
            center: new google.maps.LatLng(28.4504, -15.7240),
            zoom: 7,
            mapTypeId: 'terrain'
        }            

        map = new google.maps.Map(document.getElementById('map'), mapOptions);
        map2 = new google.maps.Map(document.getElementById('map2'), mapOptions2);
        map3 = new google.maps.Map(document.getElementById('map3'), mapOptions3);

        google.maps.event.addListener(map, 'click', function(event){
            document.getElementById("location").innerHTML=event.latLng;
        });
    };

    /**
    * Resize function to try to show the map on tab
    **/
    function resizeMap2(){                
        google.maps.event.trigger(map2, 'resize');
        map2.setZoom(map2.getZoom());

    };

我做错了吗？

Answer 1

It's kind of hard to say what the problem is without seeing your full code. You appear to be creating the google map objects correctly.

See https://www.w3schools.com/howto/howto_js_tabs.asp，以便更好地解释下面示例中使用的标签代码。

基本上我唯一添加的是openTab函数底部的resize触发器，以便在选项卡发生变化后调用它（就像你在代码中使用resizeMap2一样）。

Runnable示例（您需要添加自己的google maps api密钥）： https://jsfiddle.net/htmp3Lgw/12/

希望它有所帮助！

JS小提琴HTML

<body>
<h3>My Google Maps Demo</h3>

<div class="tab">
    <button class="tablinks" onclick="openTab(event, 'tab1')">Map 1</button>
    <button class="tablinks" onclick="openTab(event, 'tab2')">Map 2</button>
    <button class="tablinks" onclick="openTab(event, 'tab3')">Map 3</button>
</div>

<div id="tab1" class="tabcontent">
    <div id="map"></div>
</div>

<div id="tab2" class="tabcontent">
    <div id="map2"></div>
</div>

<div id="tab3" class="tabcontent">
    <div id="map3"></div>
</div>

<script>
var map;
var map2;
var map3;

//  =======  Google maps code =======
function initMap() {
  var uluru = {lat: -25.363, lng: 131.044};
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });
  map2 = new google.maps.Map(document.getElementById('map2'), {
    zoom: 4,
    center: uluru
  });
  map3 = new google.maps.Map(document.getElementById('map3'), {
    zoom: 4,
    center: uluru
  });
}

//  ======= Resize Maps Trigger =======
function doMapsResize() {
  var i;
  var maps = [map, map2, map3];

  for (i = 0; i < maps.length; i++) {
    google.maps.event.trigger(maps[i], 'resize');
  }
}

//  ======= Tabs code =======
function openTab(evt, tabId) {
  // Declare all variables
  var i, j, tabcontent, tablinks;

  // Get all elements with class="tabcontent" and hide them
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  // Get all elements with class="tablinks" and remove the class "active"
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

  // Show the current tab, and add an "active" class to the button that opened the tab
  document.getElementById(tabId).style.display = "block";
  evt.currentTarget.className += " active";

  // Finally, after we've changed tabs visibility call the resize trigger
  doMapsResize();
}
</script>

<!-- ADD YOUR OWN GOOGLE MAPS KEY -->
<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=< YOUR GOOGLE MAPS API KEY >&callback=initMap">
</script>

JS Fiddle CSS

        /* ========== Google Maps Styles =========== */
        #map {
            height: 400px;
            width: 100%;
        }

        #map2 {
            height: 400px;
            width: 100%;
        }

        #map3 {
            height: 400px;
            width: 100%;
        }

        /* ========== Tabs Styles =========== */
        /* Style the tab */
        div.tab {
            overflow: hidden;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }

        /* Style the buttons inside the tab */
        div.tab button {
            background-color: inherit;
            float: left;
            border: none;
            outline: none;
            cursor: pointer;
            padding: 14px 16px;
            transition: 0.3s;
        }

        /* Change background color of buttons on hover */
        div.tab button:hover {
            background-color: #ddd;
        }

        /* Create an active/current tablink class */
        div.tab button.active {
            background-color: #ccc;
        }

        /* Style the tab content */
        .tabcontent {
            display: none;
            padding: 6px 12px;
            border: 1px solid #ccc;
            border-top: none;
        }

Google地图不会在标签上显示地图

1 个答案:

JS小提琴HTML

JS Fiddle CSS