Google地图 - 使用自定义json样式*和* TERRAIN视图 [英] Google maps - using custom json styling *and* TERRAIN view

问题描述

因此，我创建了一些自定义JSON以使海洋更加饱和，但现在似乎无法将地图默认为TERRAIN视图，只是转到标准ROADMAP视图，似乎无法工作为什么会发生这种情况，有什么想法？

 函数初始化（）{
 
 //创建一个样式数组。 
 var blueOceanStyles = [
 {
 featureType：water，
 stylers：[
 {hue：＃4b83d4}，
 {saturation： 53} 
] 
} 
]; 
 
 //创建一个新的StyledMapType对象，将其传递给样式数组
 //以及要在地图类型控件上显示的名称。 
 var blueOceanType = new google.maps.StyledMapType（blueOceanStyles，
 {name：Blue Oceans}）; 
 
 //创建一个地图对象，并包含MapTypeId以将
 //添加到地图类型控件中。 
 var mapOptions = {
 zoom：5，
 center：new google.maps.LatLng（50，0），
 disableDefaultUI：true，
 mapTypeId：google。 maps.MapTypeId.TERRAIN，
 mapTypeControlOptions：{
 mapTypeIds：[google.maps.MapTypeId.TERRAIN，'blue_oceans'] 
} 
}; 
 var map = new google.maps.Map（document.getElementById（'map_canvas'），
 mapOptions）; 
 
 //将样式化地图与MapTypeId关联并将其设置为显示。 
 map.mapTypes.set（'blue_oceans'，blueOceanType）; 
 map.setMapTypeId（'blue_oceans'）; 
 
  

解决方案

p>

  map.setMapTypeId（'blue_oceans'）; 
  

这会导致地图类型被重置为您的地图类型为您的blue_oceans地图类型。您是否尝试创建两种不同的地图类型？或者你只想要一个适合你的风格的地形类型？如果是后者，试试这个：

 函数初始化（）{
 
 //创建一个数组的风格。 
 var blueOceanStyles = [
 {
 featureType：water，
 stylers：[
 {hue：＃4b83d4}，
 {saturation： 53} 
] 
} 
]; 
 
 //创建一个地图对象，并包含MapTypeId以将
 //添加到地图类型控件中。 
 var mapOptions = {
 zoom：5，
 center：new google.maps.LatLng（50，0），
 mapTypeId：google.maps.MapTypeId.TERRAIN 
}; 
 var map = new google.maps.Map（document.getElementById（'map_canvas'），
 mapOptions）; 
 
 //将样式化地图与MapTypeId关联并将其设置为显示。 
 map.setOptions（{styles：blueOceanStyles}）; 
} 
  

So I've created some custom JSON to make the oceans a more saturated blue but now can't seem to get the map to default to TERRAIN view, it just goes to the standard ROADMAP view, can't seem to work out why this is happening, any ideas?

function initialize() {

  // Create an array of styles.
  var blueOceanStyles = [
    {
      featureType: "water", 
      stylers: [ 
        { hue: "#4b83d4" },
        { saturation: 53 } 
      ]
    }
  ];

  // Create a new StyledMapType object, passing it the array of styles,
  // as well as the name to be displayed on the map type control.
  var blueOceanType = new google.maps.StyledMapType(blueOceanStyles,
    {name: "Blue Oceans"});

  // Create a map object, and include the MapTypeId to add
  // to the map type control.
  var mapOptions = {
    zoom: 5,
    center: new google.maps.LatLng(50, 0),
    disableDefaultUI: true,
    mapTypeId: google.maps.MapTypeId.TERRAIN,
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.TERRAIN, 'blue_oceans']
    }
  };
  var map = new google.maps.Map(document.getElementById('map_canvas'),
    mapOptions);

  //Associate the styled map with the MapTypeId and set it to display.
  map.mapTypes.set('blue_oceans', blueOceanType);
  map.setMapTypeId('blue_oceans');
}

解决方案

Your last line:

  map.setMapTypeId('blue_oceans');

This causes the map type to be reset to your map type to your blue_oceans map type. Are you trying to create the two different map types? Or do you want only a terrain type with your style? If the latter, try this instead:

      function initialize() {

  // Create an array of styles.
  var blueOceanStyles = [
    {
      featureType: "water", 
      stylers: [ 
        { hue: "#4b83d4" },
        { saturation: 53 } 
      ]
    }
  ];

  // Create a map object, and include the MapTypeId to add
  // to the map type control.
  var mapOptions = {
    zoom: 5,
    center: new google.maps.LatLng(50, 0),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };
  var map = new google.maps.Map(document.getElementById('map_canvas'),
    mapOptions);

  //Associate the styled map with the MapTypeId and set it to display.
  map.setOptions({styles: blueOceanStyles});
}

这篇关于Google地图 - 使用自定义json样式*和* TERRAIN视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！