使用 Google 的栅格 map ,我可以创建具有如下初始样式的 map (示例取自 Google's documentation):
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 });
使用基于矢量的 map ,我需要指定 map ID,而不是在代码中指定样式。该 map ID 将具有某人在云中配置的样式。我按照说明 here 创建了其中两个 map ID(普通主题和深色主题) ,然后像这样实例化我的 map :var mapOptions = {
center: { lat: 40.674, lng: -73.945 },
zoom: 12,
mapId: 'abcd1234mymapid'
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions );
我测试了两个 map ID 以确保主题正常工作。问题是我无法弄清楚如何在创建 map 后更改 map ID。我想允许用户在 map ID 之间切换。我试过了:// Does not work
map.setOptions({mapId: 'efgh5678myothermap'})
// Also does not work
map.mapId = 'efgh5678myothermap'
谷歌的矢量 map 没有这个功能还是我做错了?在加载 Google 的脚本时,我确实确保包含两个 map ID:
<script src="https://maps.googleapis.com/maps/api/js?key=KEY&v=weekly&callback=yourInitMapMethod&map_ids=abcd1234mymapid,efgh5678myothermap"></script>
最佳答案
目前,从一种样式切换到另一种样式(更改 mapIds)的唯一解决方法是创建一个新的 map 实例。 备注 每个 map 实例都计费。根据 Dynamic Maps Usage and Billing .你可以这样做:
//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 sample你可以试试。通过
setOptions()
动态改变mapId当前无法使用此功能,因为似乎尚未将 mapId 添加为 MapOptions interface 的属性。根据文档。我已经提交了 Feature Request在谷歌地图公共(public)问题跟踪器中支持这一点。
关于javascript - 如何更改 Google 矢量 map 的 mapId?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62780394/