标签式谷歌地图，显示第一张地图而不是第二张地图

tabbed google maps, showing first instead of second map

本文关键字：地图 二张 一张 标签 谷歌地图 显示      更新时间：2023-09-26

正如标题所说…第二张地图应该是卫星视图，但它显示的是第一张地图，为什么?

这是我的CSS, JS和HTML
#map-canvas, #map-canvas-2{width:90%; height:400px;}
ul#tabs {
    list-style-type: none;
    padding: 0;
    text-align: center;
}
ul#tabs li {
    display: inline-block;
    background-color: #32c896;
    border-bottom: solid 5px #238b68;
    padding: 5px 20px;
    margin-bottom: 4px;
    color: #fff;
    cursor: pointer;
}
ul#tabs li:hover {
    background-color: #238b68;
}
ul#tabs li.active {
    background-color: #238b68;
}
ul#tab {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
ul#tab li {
    display: none;
}
ul#tab li.active {
    display: block;
}
<!-- and the JS and HTML -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("ul#tabs li").click(function(e){
        if (!$(this).hasClass("active")) {
            var tabNum = $(this).index();
            var nthChild = tabNum+1;
            $("ul#tabs li.active").removeClass("active");
            $(this).addClass("active");
            google.maps.event.trigger(map2, 'resize');
            $("ul#tab li.active").removeClass("active");
            $("ul#tab li:nth-child("+nthChild+")").addClass("active");
        }
    });
});
</script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
	var mapCanvas = document.getElementById('map-canvas');
    var mapCanvas2 = document.getElementById('map-canvas-2');
	var mapOptions = {
		center: new google.maps.LatLng(40.727201, -73.908737),
		zoom: 12,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	}
    var mapOptions2 = {
		center: new google.maps.LatLng(40.727201, -73.908737),
		zoom: 12,
		mapTypeId: google.maps.MapTypeId.SATELLITE 
	}
	var map = new google.maps.Map(mapCanvas, mapOptions)
    var map2 = new google.maps.Map(mapCanvas2, mapOptions2)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<ul id="tabs">
	<li class="active">first</li>
	<li>second</li>
</ul>
<ul id="tab">
	<li class="active">
    	<div id="map-canvas"></div>
    </li>
    <li>
    	<div id="map-canvas-2"></div>
    </li>
</ul>

与张贴的代码片段，我得到一个javascript错误:Uncaught ReferenceError: map2 is not defined

    将map2设置为全局
  1. 要修复调用initialize时隐藏的第二个选项卡的显示，在div显示后触发地图大小调整事件。

代码片段: 

$(document).ready(function() {
  $("ul#tabs li").click(function(e) {
    if (!$(this).hasClass("active")) {
      var tabNum = $(this).index();
      var nthChild = tabNum + 1;
      $("ul#tabs li.active").removeClass("active");
      $(this).addClass("active");
      $("ul#tab li.active").removeClass("active");
      $("ul#tab li:nth-child(" + nthChild + ")").addClass("active");
      google.maps.event.trigger(map2, 'resize');
      // reset the map center once the map has the correct size
      map2.setCenter(mapOptions2.center);
    }
  });
});
// make map2 global
var map2;
var mapOptions2;
function initialize() {
  var mapCanvas = document.getElementById('map-canvas');
  var mapCanvas2 = document.getElementById('map-canvas-2');
  var mapOptions = {
    center: new google.maps.LatLng(40.727201, -73.908737),
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  mapOptions2 = {
    center: new google.maps.LatLng(40.727201, -73.908737),
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.SATELLITE
  }
  var map = new google.maps.Map(mapCanvas, mapOptions);
  var m = new google.maps.Marker({
    position: mapOptions.center,
    map: map
  });
  map2 = new google.maps.Map(mapCanvas2, mapOptions2);
  var m2 = new google.maps.Marker({
    position: mapOptions2.center,
    map: map2
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
#map-canvas,
#map-canvas-2 {
  width: 90%;
  height: 400px;
}
ul#tabs {
  list-style-type: none;
  padding: 0;
  text-align: center;
}
ul#tabs li {
  display: inline-block;
  background-color: #32c896;
  border-bottom: solid 5px #238b68;
  padding: 5px 20px;
  margin-bottom: 4px;
  color: #fff;
  cursor: pointer;
}
ul#tabs li:hover {
  background-color: #238b68;
}
ul#tabs li.active {
  background-color: #238b68;
}
ul#tab {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
ul#tab li {
  display: none;
}
ul#tab li.active {
  display: block;
}
<!-- and the JS and HTML -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<ul id="tabs">
  <li class="active">first</li>
  <li>second</li>
</ul>
<ul id="tab">
  <li class="active">
    <div id="map-canvas"></div>
  </li>
  <li>
    <div id="map-canvas-2"></div>
  </li>
</ul>

相关文章：