在一个 html 页面中使用 2 Google 映射 API 键
Use 2 Google Maps API keys in one html page
我正在尝试使用 2 个 <script> 字符串加载 2 个 Google 地图，一次加载一个。
每个字符串都有不同的KEY，每个字符串加载不同的“回调”。
然后我有 2 个带有 2 个不同 ID 的 div。每个 id 都以“标准模式”或 (prefers-color-scheme: dark) 加载。
问题是它间歇性地工作，如果我刷新页面有时地图会消失，有时它会加载......随机。
这是我的设置方式。如果有人可以解决此问题，请告诉我:)
Html:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=MYKEY&callback=emptygmap" async defer></script>
<script src="https://maps.googleapis.com/maps/api/js?key=MYOTHERKEY&callback=emptygmapdue" async defer></script>
</head>
<body>
<div id="lightmaps">
<div id="gmap"></div>
</div>
<div id="darkmaps">
<div id="gmapdark"></div>
</div>
<script>
function emptygmap() {
//mappa uno
var myLatlng = new google.maps.LatLng(25.855027,-80.1874731);
//mappa due
var myLatlngBel = new google.maps.LatLng(26.1463041,-81.7958914);
//variabile icone marker
var icona = {url: '../symb/icons8-marker-100.png',
scaledSize : new google.maps.Size(40, 40)
};
//stile mappa uno e due
var emptystyle = [
{
"featureType": "all",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#ff0000"
},
{
"lightness": "-25"
}
]
},
{
"featureType": "administrative",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#444444"
},
{
"lightness": "50"
}
]
},
{
"featureType": "administrative.country",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#ff0000"
},
{
"visibility": "off"
}
]
},
{
"featureType": "administrative.country",
"elementType": "labels.text",
"stylers": [
{
"saturation": "18"
},
{
"lightness": "-55"
},
{
"visibility": "simplified"
},
{
"color": "#4484a1"
}
]
},
{
"featureType": "administrative.province",
"elementType": "geometry.fill",
"stylers": [
{
"visibility": "off"
},
{
"hue": "#ff0000"
}
]
},
{
"featureType": "administrative.locality",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#000000"
},
{
"saturation": "0"
},
{
"lightness": "50"
}
]
},
{
"featureType": "administrative.neighborhood",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#000000"
},
{
"lightness": "50"
}
]
},
{
"featureType": "administrative.land_parcel",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#000000"
},
{
"lightness": "50"
},
{
"gamma": "1.00"
}
]
},
{
"featureType": "landscape",
"elementType": "all",
"stylers": [
{
"color": "#f2f2f2"
},
{
"saturation": "28"
},
{
"lightness": "42"
},
{
"gamma": "2.01"
},
{
"weight": "1"
}
]
},
{
"featureType": "landscape",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#000000"
},
{
"lightness": "50"
}
]
},
{
"featureType": "landscape.man_made",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "landscape.man_made",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#ffffff"
},
{
"visibility": "off"
},
{
"lightness": "50"
},
{
"gamma": "1"
}
]
},
{
"featureType": "poi",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road",
"elementType": "all",
"stylers": [
{
"saturation": -100
},
{
"lightness": 45
}
]
},
{
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [
{
"visibility": "on"
},
{
"color": "#000000"
},
{
"weight": "0.4"
},
{
"lightness": "80"
},
{
"gamma": "1.0"
}
]
},
{
"featureType": "road.highway",
"elementType": "all",
"stylers": [
{
"visibility": "simplified"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#000000"
},
{
"visibility": "simplified"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [
{
"visibility": "on"
},
{
"weight": "0.15"
},
{
"lightness": "0"
},
{
"gamma": "1.00"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels.text.stroke",
"stylers": [
{
"weight": "0.60"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "simplified"
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry.fill",
"stylers": [
{
"gamma": "1.50"
},
{
"weight": "1.60"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.local",
"elementType": "geometry.stroke",
"stylers": [
{
"weight": "0.20"
},
{
"color": "#000000"
},
{
"lightness": "71"
}
]
},
{
"featureType": "transit",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "water",
"elementType": "all",
"stylers": [
{
"color": "#fcfcfc"
},
{
"visibility": "on"
}
]
},
{
"featureType": "water",
"elementType": "geometry.fill",
"stylers": [
{
"saturation": "-2"
},
{
"lightness": "12"
},
{
"gamma": "1.00"
},
{
"color": "#cfdde8"
}
]
},
{
"featureType": "water",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "simplified"
},
{
"color": "#ff0000"
}
]
}
]
//posizione mappa uno
var mapOptions = {
zoom: 12.55,
center: { lat: 25.84, lng: -80.16},
mapTypeId: google.maps.MapTypeId.ROADMAP,
fullscreenControl: false,
streetViewControl: false,
mapTypeControl: false,
rotateControl: false,
gestureHandling: "auto",
styles: emptystyle
}
//posizione mappa due
var mapOptionsBel = {
zoom: 12.55,
center: { lat: 26.1267527, lng: -81.814762 },
mapTypeId: google.maps.MapTypeId.ROADMAP,
fullscreenControl: false,
streetViewControl: false,
mapTypeControl: false,
rotateControl: false,
gestureHandling: "auto",
styles: emptystyle
}
//mappa uno
var map = new google.maps.Map(document.getElementById('gmap'), mapOptions);
//mappa due
var mapB = new google.maps.Map(document.getElementById('gmapnaples'), mapOptionsBel);
//marker e posizione mappa uno
marker = new google.maps.Marker({
map:map,
draggable:false,
animation: google.maps.Animation.DROP,
position: myLatlng,
icon: icona,
});
//marker e posizione mappa due
markerB = new google.maps.Marker({
map:mapB,
scaledSize: new google.maps.Size(20, 20),
draggable:false,
animation: google.maps.Animation.DROP,
position: { lat: 26.1463041, lng: -81.7958914 },
icon: icona,
});
//animazione e mappa uno e due
marker.setAnimation(google.maps.Animation.DROP);
markerB.setAnimation(google.mapB.Animation.DROP);
}
google.maps.event.addDomListener(window, 'load', initialize);
$(document).ready(function() {initialize();
});
</script>
<script>
function emptygmapdue() {
//mappa uno
var myLatlng = new google.maps.LatLng(25.855027,-80.1874731);
//mappa due
var myLatlngBel = new google.maps.LatLng(26.1463041,-81.7958914);
//variabile icone marker
var icona = {url: '../symb/icons8-marker-50.png',
scaledSize : new google.maps.Size(40, 40)
};
//stile mappa uno e due
var emptystyle = [
{
"featureType": "all",
"elementType": "labels.text.fill",
"stylers": [
{
"saturation": "-21"
},
{
"color": "#929292"
},
{
"lightness": "26"
}
]
},
{
"featureType": "all",
"elementType": "labels.text.stroke",
"stylers": [
{
"visibility": "on"
},
{
"lightness": 16
},
{
"color": "#181c21"
}
]
},
{
"featureType": "all",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#1f2125"
},
{
"lightness": "-2"
}
]
},
{
"featureType": "administrative",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#1f2125"
},
{
"lightness": 17
},
{
"weight": 1.2
}
]
},
{
"featureType": "landscape",
"elementType": "geometry",
"stylers": [
{
"color": "#1f2125"
},
{
"lightness": "3"
}
]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{
"color": "#1f2125"
},
{
"lightness": "1"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#1f2125"
},
{
"lightness": "30"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#1f2125"
},
{
"lightness": "9"
},
{
"weight": 0.2
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{
"color": "#1f2125"
},
{
"lightness": "25"
}
]
},
{
"featureType": "road.local",
"elementType": "geometry",
"stylers": [
{
"color": "#181c21"
},
{
"lightness": "20"
}
]
},
{
"featureType": "transit",
"elementType": "geometry",
"stylers": [
{
"color": "#181c21"
},
{
"lightness": "3"
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#282d32"
},
{
"lightness": 17
}
]
}
]
//posizione mappa uno
var mapOptions = {
zoom: 12.55,
center: { lat: 25.84, lng: -80.16},
mapTypeId: google.maps.MapTypeId.ROADMAP,
fullscreenControl: false,
streetViewControl: false,
mapTypeControl: false,
rotateControl: false,
gestureHandling: "auto",
styles: emptystyle
}
//posizione mappa due
var mapOptionsBel = {
zoom: 12.55,
center: { lat: 26.1267527, lng: -81.814762 },
mapTypeId: google.maps.MapTypeId.ROADMAP,
fullscreenControl: false,
streetViewControl: false,
mapTypeControl: false,
rotateControl: false,
gestureHandling: "auto",
styles: emptystyle
}
//mappa uno
var map = new google.maps.Map(document.getElementById('gmapdark'), mapOptions);
//mappa due
var mapB = new google.maps.Map(document.getElementById('gmapnaplesdark'), mapOptionsBel);
//marker e posizione mappa uno
marker = new google.maps.Marker({
map:map,
draggable:false,
animation: google.maps.Animation.DROP,
position: myLatlng,
icon: icona,
});
//marker e posizione mappa due
markerB = new google.maps.Marker({
map:mapB,
scaledSize: new google.maps.Size(20, 20),
draggable:false,
animation: google.maps.Animation.DROP,
position: { lat: 26.1463041, lng: -81.7958914 },
icon: icona,
});
//animazione e mappa uno e due
marker.setAnimation(google.maps.Animation.DROP);
markerB.setAnimation(google.mapB.Animation.DROP);
}
google.maps.event.addDomListener(window, 'load', initialize);
$(document).ready(function() {initialize();
});
</script>
</body>
</html>
CSS:
@media (prefers-color-scheme: dark) {
div#darkmaps {display: block;}
div#lightmaps {display: none;}
}
#gmap, #gmapdark {width:100%;height:45vw;}
#darkmaps {display: none;}
#lightmaps {display: block;}
不建议也不支持在单个页面上加载 Google Maps JS API 两次。您将收到有关此的控制台警告。
问题：
- 双重计费
- 碰撞和意外行为
解决方案：
- 对页面上的两个地图使用相同的键（不确定为什么不推荐这样做）。
- 如果确实需要，可以将其中一张地图嵌入到 iframe 中。
我正在尝试使用 2 个 <script> 字符串加载 2 个 Google 地图，一次加载一个。
每个字符串都有不同的KEY，每个字符串加载不同的“回调”。
然后我有 2 个带有 2 个不同 ID 的 div。每个 id 都以“标准模式”或 (prefers-color-scheme: dark) 加载。
问题是它间歇性地工作，如果我刷新页面有时地图会消失，有时它会加载......随机。
这是我的设置方式。如果有人可以解决此问题，请告诉我:)
Html:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=MYKEY&callback=emptygmap" async defer></script>
<script src="https://maps.googleapis.com/maps/api/js?key=MYOTHERKEY&callback=emptygmapdue" async defer></script>
</head>
<body>
<div id="lightmaps">
<div id="gmap"></div>
</div>
<div id="darkmaps">
<div id="gmapdark"></div>
</div>
<script>
function emptygmap() {
//mappa uno
var myLatlng = new google.maps.LatLng(25.855027,-80.1874731);
//mappa due
var myLatlngBel = new google.maps.LatLng(26.1463041,-81.7958914);
//variabile icone marker
var icona = {url: '../symb/icons8-marker-100.png',
scaledSize : new google.maps.Size(40, 40)
};
//stile mappa uno e due
var emptystyle = [
{
"featureType": "all",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#ff0000"
},
{
"lightness": "-25"
}
]
},
{
"featureType": "administrative",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#444444"
},
{
"lightness": "50"
}
]
},
{
"featureType": "administrative.country",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#ff0000"
},
{
"visibility": "off"
}
]
},
{
"featureType": "administrative.country",
"elementType": "labels.text",
"stylers": [
{
"saturation": "18"
},
{
"lightness": "-55"
},
{
"visibility": "simplified"
},
{
"color": "#4484a1"
}
]
},
{
"featureType": "administrative.province",
"elementType": "geometry.fill",
"stylers": [
{
"visibility": "off"
},
{
"hue": "#ff0000"
}
]
},
{
"featureType": "administrative.locality",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#000000"
},
{
"saturation": "0"
},
{
"lightness": "50"
}
]
},
{
"featureType": "administrative.neighborhood",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#000000"
},
{
"lightness": "50"
}
]
},
{
"featureType": "administrative.land_parcel",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#000000"
},
{
"lightness": "50"
},
{
"gamma": "1.00"
}
]
},
{
"featureType": "landscape",
"elementType": "all",
"stylers": [
{
"color": "#f2f2f2"
},
{
"saturation": "28"
},
{
"lightness": "42"
},
{
"gamma": "2.01"
},
{
"weight": "1"
}
]
},
{
"featureType": "landscape",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#000000"
},
{
"lightness": "50"
}
]
},
{
"featureType": "landscape.man_made",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "landscape.man_made",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#ffffff"
},
{
"visibility": "off"
},
{
"lightness": "50"
},
{
"gamma": "1"
}
]
},
{
"featureType": "poi",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road",
"elementType": "all",
"stylers": [
{
"saturation": -100
},
{
"lightness": 45
}
]
},
{
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [
{
"visibility": "on"
},
{
"color": "#000000"
},
{
"weight": "0.4"
},
{
"lightness": "80"
},
{
"gamma": "1.0"
}
]
},
{
"featureType": "road.highway",
"elementType": "all",
"stylers": [
{
"visibility": "simplified"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#000000"
},
{
"visibility": "simplified"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [
{
"visibility": "on"
},
{
"weight": "0.15"
},
{
"lightness": "0"
},
{
"gamma": "1.00"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels.text.stroke",
"stylers": [
{
"weight": "0.60"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "simplified"
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry.fill",
"stylers": [
{
"gamma": "1.50"
},
{
"weight": "1.60"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.local",
"elementType": "geometry.stroke",
"stylers": [
{
"weight": "0.20"
},
{
"color": "#000000"
},
{
"lightness": "71"
}
]
},
{
"featureType": "transit",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "water",
"elementType": "all",
"stylers": [
{
"color": "#fcfcfc"
},
{
"visibility": "on"
}
]
},
{
"featureType": "water",
"elementType": "geometry.fill",
"stylers": [
{
"saturation": "-2"
},
{
"lightness": "12"
},
{
"gamma": "1.00"
},
{
"color": "#cfdde8"
}
]
},
{
"featureType": "water",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "simplified"
},
{
"color": "#ff0000"
}
]
}
]
//posizione mappa uno
var mapOptions = {
zoom: 12.55,
center: { lat: 25.84, lng: -80.16},
mapTypeId: google.maps.MapTypeId.ROADMAP,
fullscreenControl: false,
streetViewControl: false,
mapTypeControl: false,
rotateControl: false,
gestureHandling: "auto",
styles: emptystyle
}
//posizione mappa due
var mapOptionsBel = {
zoom: 12.55,
center: { lat: 26.1267527, lng: -81.814762 },
mapTypeId: google.maps.MapTypeId.ROADMAP,
fullscreenControl: false,
streetViewControl: false,
mapTypeControl: false,
rotateControl: false,
gestureHandling: "auto",
styles: emptystyle
}
//mappa uno
var map = new google.maps.Map(document.getElementById('gmap'), mapOptions);
//mappa due
var mapB = new google.maps.Map(document.getElementById('gmapnaples'), mapOptionsBel);
//marker e posizione mappa uno
marker = new google.maps.Marker({
map:map,
draggable:false,
animation: google.maps.Animation.DROP,
position: myLatlng,
icon: icona,
});
//marker e posizione mappa due
markerB = new google.maps.Marker({
map:mapB,
scaledSize: new google.maps.Size(20, 20),
draggable:false,
animation: google.maps.Animation.DROP,
position: { lat: 26.1463041, lng: -81.7958914 },
icon: icona,
});
//animazione e mappa uno e due
marker.setAnimation(google.maps.Animation.DROP);
markerB.setAnimation(google.mapB.Animation.DROP);
}
google.maps.event.addDomListener(window, 'load', initialize);
$(document).ready(function() {initialize();
});
</script>
<script>
function emptygmapdue() {
//mappa uno
var myLatlng = new google.maps.LatLng(25.855027,-80.1874731);
//mappa due
var myLatlngBel = new google.maps.LatLng(26.1463041,-81.7958914);
//variabile icone marker
var icona = {url: '../symb/icons8-marker-50.png',
scaledSize : new google.maps.Size(40, 40)
};
//stile mappa uno e due
var emptystyle = [
{
"featureType": "all",
"elementType": "labels.text.fill",
"stylers": [
{
"saturation": "-21"
},
{
"color": "#929292"
},
{
"lightness": "26"
}
]
},
{
"featureType": "all",
"elementType": "labels.text.stroke",
"stylers": [
{
"visibility": "on"
},
{
"lightness": 16
},
{
"color": "#181c21"
}
]
},
{
"featureType": "all",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#1f2125"
},
{
"lightness": "-2"
}
]
},
{
"featureType": "administrative",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#1f2125"
},
{
"lightness": 17
},
{
"weight": 1.2
}
]
},
{
"featureType": "landscape",
"elementType": "geometry",
"stylers": [
{
"color": "#1f2125"
},
{
"lightness": "3"
}
]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{
"color": "#1f2125"
},
{
"lightness": "1"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#1f2125"
},
{
"lightness": "30"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#1f2125"
},
{
"lightness": "9"
},
{
"weight": 0.2
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{
"color": "#1f2125"
},
{
"lightness": "25"
}
]
},
{
"featureType": "road.local",
"elementType": "geometry",
"stylers": [
{
"color": "#181c21"
},
{
"lightness": "20"
}
]
},
{
"featureType": "transit",
"elementType": "geometry",
"stylers": [
{
"color": "#181c21"
},
{
"lightness": "3"
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#282d32"
},
{
"lightness": 17
}
]
}
]
//posizione mappa uno
var mapOptions = {
zoom: 12.55,
center: { lat: 25.84, lng: -80.16},
mapTypeId: google.maps.MapTypeId.ROADMAP,
fullscreenControl: false,
streetViewControl: false,
mapTypeControl: false,
rotateControl: false,
gestureHandling: "auto",
styles: emptystyle
}
//posizione mappa due
var mapOptionsBel = {
zoom: 12.55,
center: { lat: 26.1267527, lng: -81.814762 },
mapTypeId: google.maps.MapTypeId.ROADMAP,
fullscreenControl: false,
streetViewControl: false,
mapTypeControl: false,
rotateControl: false,
gestureHandling: "auto",
styles: emptystyle
}
//mappa uno
var map = new google.maps.Map(document.getElementById('gmapdark'), mapOptions);
//mappa due
var mapB = new google.maps.Map(document.getElementById('gmapnaplesdark'), mapOptionsBel);
//marker e posizione mappa uno
marker = new google.maps.Marker({
map:map,
draggable:false,
animation: google.maps.Animation.DROP,
position: myLatlng,
icon: icona,
});
//marker e posizione mappa due
markerB = new google.maps.Marker({
map:mapB,
scaledSize: new google.maps.Size(20, 20),
draggable:false,
animation: google.maps.Animation.DROP,
position: { lat: 26.1463041, lng: -81.7958914 },
icon: icona,
});
//animazione e mappa uno e due
marker.setAnimation(google.maps.Animation.DROP);
markerB.setAnimation(google.mapB.Animation.DROP);
}
google.maps.event.addDomListener(window, 'load', initialize);
$(document).ready(function() {initialize();
});
</script>
</body>
</html>
CSS:
@media (prefers-color-scheme: dark) {
div#darkmaps {display: block;}
div#lightmaps {display: none;}
}
#gmap, #gmapdark {width:100%;height:45vw;}
#darkmaps {display: none;}
#lightmaps {display: block;}
不建议也不支持在单个页面上加载 Google Maps JS API 两次。您将收到有关此的控制台警告。
问题：
- 双重计费
- 碰撞和意外行为
解决方案：
- 对页面上的两个地图使用相同的键（不确定为什么不推荐这样做）。
- 如果确实需要，可以将其中一张地图嵌入到 iframe 中。