如何更改 Google 矢量地图的 mapId？

Question

使用 Google 的光栅地图，我可以创建一个具有这样的初始样式的地图（示例取自Google 的文档）：

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'

这个功能是谷歌的矢量地图消失了还是我做错了？

我确实确保在加载 Google 的脚本时包含两个地图 ID：

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

Answer 1

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

//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 接口的属性。

我已经在 Google Maps Public 问题跟踪器中提交了一个功能请求来支持这个。