javascript - 谷歌地图 : set StyledMapType with Terrain

Question

问题:我想使用具有自己样式的 google maps v3 地形图作为自己的 mapType。

我从这段代码开始:

var mapOptions = {
  scrollwheel: false,
  mapTypeId: google.maps.MapTypeId.TERRAIN,
  styles: styles
};

它以我自己的风格展示了我的地形。没关系!现在，我也想将其添加到 mapTypeIds

var styledMap = new google.maps.StyledMapType(styles, {
    name: "NSW"
}); 

var mapOptions = {
  scrollwheel: false,
  mapTypeControlOptions: {
    mapTypeIds: [google.maps.MapTypeId.TERRAIN, 'map_style']
  }
};

var map = new google.maps.Map(map_id[0],
    mapOptions);

map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');

问题是，谷歌地图对“StyledMapType”使用“ROADMAP”，我不知道如何将其更改为“TERRAIN”。这可能吗？

更新:

如您所见，“路线图”是默认设置。在 google maps api 的 main.js 中有一行:

k=c.baseMapTypeId||"roadmap"

那么，baseMapTypeId 是什么？我在 mapOptions 中设置的那个:

mapTypeId: google.maps.MapTypeId.TERRAIN

???

梅，这有助于解决我的问题。

Answer 1

你可以这样做:

var styles = [{
    "stylers": [{
        "saturation": -100
    }]
}];

var styledMap = new google.maps.StyledMapType(styles, {
    name: "Name of your style"
});

var myLatlng = new google.maps.LatLng(10, 10);

var map = new google.maps.Map(document.getElementById("map-canvas"), {
    scrollwheel: false,
    center: myLatlng,
    zoom: 10
});

map.mapTypes.set('NSW', styledMap);

var mapTypeControlOptions = {
    mapTypeControlOptions: {
        mapTypeIds: [google.maps.MapTypeId.TERRAIN, 'NSW']
    }
};

map.setOptions(mapTypeControlOptions);

请注意，您的 StyledMapType 的名称是将显示在 map 上的名称，而您的 MapStyle 的 id使用 set 方法声明是您需要用来引用您的 map 样式的方法。

希望这对您有所帮助!

JSFiddle demo

编辑:

如果您想在 TERRAIN map 样式上应用自定义样式，您可以通过设置当前 map 类型的 styles 来实现。您可以向 map 添加自定义控件来处理切换。

JSFiddle demo