如何更改Google矢量地图的mapId? [英] How do I change the mapId of a Google vector map?

问题描述

使用Google的栅格地图，我可以创建具有这种初始样式的地图(示例取自

With Google's raster maps, I could create a map with an initial style like this (example taken from 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 );

然后，我可以这样更改样式:

Then, I could change the style like this:

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

使用基于矢量的地图，而不是在代码中指定样式，我需要指定地图ID.该地图ID将具有某人在云中配置的样式.我按照

With the vector based maps, instead of specifying the style in code, I need to specify a map ID. That map ID will have a style that someone configured in the cloud. I created two of these map IDs (a normal theme and a dark them) following the instructions here, and then instantiated my map like this:

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之间切换.我试过了:

I tested both map IDs to be sure the theme was working. The problem is that I can't figure out how to change the map ID after creating the map. I want to allow the user to switch between map IDs. I tried:

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

// Also does not work
map.mapId = 'efgh5678myothermap'

此功能是否随Google的矢量地图一起使用?还是我做错了?

Is this functionality gone with Google's vector maps or am I doing it wrong?

在加载Google脚本时，我确实确保同时包含了两个地图ID:

I did make sure to include both map IDs when loading Google's script:

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

推荐答案

当前，从一种样式切换到另一种样式(更改mapId)的唯一解决方法是创建一个新的地图实例. 请注意，每个地图实例都需要付费.根据动态地图使用和计费.您可以执行以下操作:

Currently, the only workaround to switch from one style to another (changing mapIds) is to create a new map instance. Note that each map instance is billed. As per Dynamic Maps Usage and Billing. You can do something like this:

//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示例，您可以尝试.

Here's a complete JSFiddle sample you can try.

当前无法通过setOptions()函数动态更改mapId，因为似乎尚未将mapId作为

Dynamically changing the mapId through the setOptions() function currently is not possible as it appears that mapId is not yet added as a property of the MapOptions interface as per the documentation.

我已经在Google Maps公开问题跟踪器中提交了功能请求以支持此操作.

I already filed a Feature Request in Google Maps Public issue tracker to support for this.

这篇关于如何更改Google矢量地图的mapId?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！