如何在一个 HTML 页面中有多个具有 src 属性的<脚本 src= "url" >？

Question

var map;
function initMapx() {
map = new google.maps.Map(document.getElementById('myMap'),{
center: {lat:55.537664, lng:13.074432},
zoom: 8
});
}

#myMap {
height: 100%;
}

<h4>Displaying Google map.</h4>
<script type="text/javascript" async defer
src='https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=initMapx'>
</script>
<div id="myMap"></div>

这是我从scirpt src="url"从Google Map API请求的第一个地图，它工作正常。

function myCity() {
var Athens = {lat:37.986259, lng:23.726772};
var map = new google.maps.Map(document.getElementById('myPlace'), {zoom: 14, center: Athens});
var marker = new google.maps.Marker({position: Athens, map: map});
}

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

<h4>Add a Google map with a marker.</h4>
<div id="myPlace"></div>
<script type="text/javascript" async defer
src='https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myCity'>
</script>

这是我从 HTML 脚本标签中的 src 属性从谷歌地图 API 请求的第二张地图。当第二个地图加载时，第一个地图消失。我认为是因为第一个脚本 src="url" 标签被第二个脚本 src="url" 覆盖。我知道我可以将两个地图放在一个代码块中。但我想单独请求它们。有什么方法可以在一个页面中有多个脚本 src="url"？

Answer 1

在页面中包含多个<script>元素只有在它们尝试创建相同的全局变量时才会导致问题......如果您尝试在同一页面中包含两次Google Maps API，就会发生这种情况。

所以不要那样做。

编写一个回调函数(目前有两个：initMapx和myCity(，用于创建两个映射。

function createBothMaps() {
initMapx();
myCity();
}

和

<script async defer src='https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=createBothMaps'>