如何更改Google矢量地图的mapId

Question

使用谷歌的光栅地图，我可以创建一个具有如下初始样式的地图(示例取自谷歌文档(：

var mapStyles = [{ elementType: 'geometry', stylers: [{ color: '#242f3e' }]}];
var mapOptions = {
center: { lat: 40.674, lng: -73.945 },
zoom: 12,
styles: mapStyles 
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions );

然后，我可以改变这样的风格：

var newStyles = [{ elementType: 'geometry', stylers: [{ color: '#ffffff' }]}];
map.setOptions({ styles: newStyles });

对于基于矢量的映射，我需要指定一个映射ID，而不是在代码中指定样式。该映射ID将具有某人在云中配置的样式。我按照这里的说明创建了其中两个地图ID(一个普通主题和一个深色主题(，然后实例化了我的地图，如下所示：

var mapOptions = {
center: { lat: 40.674, lng: -73.945 },
zoom: 12,
mapId: 'abcd1234mymapid'
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions );

我测试了两个地图ID，以确保主题有效。问题是我不知道如何在创建地图后更改地图ID。我想允许用户在地图ID之间切换。我试过了：

// Does not work
map.setOptions({mapId: 'efgh5678myothermap'})
// Also does not work
map.mapId = 'efgh5678myothermap'

谷歌的矢量地图是没有这个功能了，还是我做错了？

我确实确保在加载谷歌的脚本时包括两个地图ID：

<script src="https://maps.googleapis.com/maps/api/js?key=KEY&v=weekly&callback=yourInitMapMethod&map_ids=abcd1234mymapid,efgh5678myothermap"></script>

Answer 1

当前，从一种样式切换到另一种样式(更改mapId(的唯一解决方法是创建一个新的映射实例请注意每个映射实例都要计费。根据动态地图使用和计费。你可以这样做：

//Event that triggers change of map style
document.getElementById("map_id_1").addEventListener("click", function(){
mapID = "YOUR_MAP_ID"
new google.maps.Map(document.getElementById("map"), {
...sharedOptions,
mapId: mapID,
useStaticMap: false
});
});

这里有一个完整的JSFiddle示例，您可以尝试。

目前无法通过setOptions()函数动态更改mapId，因为根据文档，mapId似乎尚未添加为MapOptions接口的属性。

我已经在谷歌地图公共问题跟踪器中提交了一个功能请求来支持这一点。