如何在 HTML 和 JS 文件中更改 Google Maps Javascript API 的地图 ID？
Posted
技术标签:
【中文标题】如何在 HTML 和 JS 文件中更改 Google Maps Javascript API 的地图 ID？【英文标题】：How to change map ID for Google Maps Javascript API within HTML and JS file? 【发布时间】：2021-06-28 18:03:03 【问题描述】：我正在尝试为用户提供一个选项来选择他们想要在地图上显示的内容，这些选项将决定我已将哪个 Google 地图样式 ID 与拉出地图的脚本链接相关联。 html doc中的脚本链接是这样的
<script
async
src="https://maps.googleapis.com/maps/api/js?key=**MYAPIKEY**&map_ids=**MYMAPID**&callback=initMap"
></script>
js文件中的函数是这样的
function initMap()
map = new google.maps.Map(document.getElementById("map"),
center: lat: lat, lng: lng ,
zoom: 15,
mapId: "MYMAPID",
);
如果我只使用一个 mapID，这一切都很好。地图 ID 需要在 JS 文件和 HTML 中匹配，所以如果说我希望用户选择会导致他们查看 5 个可能地图中的 1 个的选项，我该如何让它工作？
【问题讨论】：
【参考方案1】：您可以在 API 的引导程序中包含多个 mapId： （为清楚起见添加了空格）
<script
src="https://maps.googleapis.com/maps/api/js?
key=AIzaSyBIwzALxUPNbatRBj3Xi1Uhp0fFzwWNBkE
&callback=initMap&libraries=
&v=beta
&map_ids=dea1fd60813b4e75,6a25ac9af0b8a3a2,2635966e05b3c0d6"
async
></script>
(documentation reference)
mapId 似乎无法通过.setOptions 方法动态更改（至少目前如此），但您可以使用新的mapId 重新构建地图。
proof of concept fiddle
代码 sn-p：
let map;
function initMap()
map = new google.maps.Map(document.getElementById("map"),
center:
lat: -34.397,
lng: 150.644
,
zoom: 8,
mapId: "dea1fd60813b4e75"
);
google.maps.event.addDomListener(document.getElementById('grey'), 'click', function()
// map.setOptions(mapId:"6a25ac9af0b8a3a2")
map = new google.maps.Map(document.getElementById("map"),
center:
lat: -34.397,
lng: 150.644
,
zoom: 8,
mapId: "6a25ac9af0b8a3a2"
);
);
google.maps.event.addDomListener(document.getElementById('classic'), 'click', function()
// map.setOptions(mapId:"dea1fd60813b4e75")
map = new google.maps.Map(document.getElementById("map"),
center:
lat: -34.397,
lng: 150.644
,
zoom: 8,
mapId: "dea1fd60813b4e75"
);
);
google.maps.event.addDomListener(document.getElementById('light'), 'click', function()
// map.setOptions(mapId:"2635966e05b3c0d6")
map = new google.maps.Map(document.getElementById("map"),
center:
lat: -34.397,
lng: 150.644
,
zoom: 8,
mapId: "2635966e05b3c0d6"
);
);
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map
height: 90%;
/* Optional: Makes the sample page fill the window. */
html,
body
height: 100%;
margin: 0;
padding: 0;
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<input id="grey" type="button" value="grey" />
<input id="classic" type="button" value="classic" />
<input id="light" type="button" value="light" />
<div id="map"></div>
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=&v=beta&map_ids=dea1fd60813b4e75,6a25ac9af0b8a3a2,2635966e05b3c0d6"
async
></script>
</body>
</html>【讨论】：
以上是关于如何在 HTML 和 JS 文件中更改 Google Maps Javascript API 的地图 ID？的主要内容，如果未能解决你的问题，请参考以下文章