javascript - 如何更改 Google 矢量 map 的 mapId?

标签 javascript google-maps

使用 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/

相关文章:

javascript - 更改字段名称动态 extjs 6

javascript - ajax调用后onclick jquery不工作

javascript - 为什么我的按钮上的功能不起作用?

javascript - 在 Coffeescript 中强制迭代 for 循环

javascript - 谷歌地图加载旧金山然后重新加载正确的位置

android - 如何在 Xamarin 中为谷歌地图实现标记聚类

javascript - 如何将此 if 语句转换为箭头函数?

javascript - Google map 多边形无法在 IE 中正确呈现(9 和 10)

android - 我如何在 jdk.7.o 中获取 MD5 哈希值?

javascript - MarkerWithLabel labelContent div onclick 事件