如何从路线图视图中删除山脉阴影(缩放级别<13)

时间:2018-08-09 07:34:21

标签: css google-maps google-maps-api-3 styles layer

我想删除常规“路线图”地图类型中的山脉阴影。

在13级缩放以下时,“路线图”视图显示山/山/高程阴影,从而在地图上提供3D体验。当您放大到13级或更高的缩放级别时,Google Maps将删除山脉阴影。在我看来,这是一个单独的图层,当您缩小到12、11等时,Google会自行叠加-但我尚未确定。

有人知道我是否可以在例如11级或12级缩放时获取样式?

出于某种图形目的,我希望获得z13 / z和更近的11级或12级缩放的真实平面视图体验。

请参阅随附的图片以显示我的意思的不同之处:

12级缩放,山影

13级缩放,没有山影,表面平坦

谢谢!

1 个答案:

答案 0 :(得分:1)

我发现可以通过自定义地图类型(设置此样式属性(以及其他))来完成:

    {
      featureType: 'landscape',
      elementType: 'geometry',
      stylers: [
        {
            color:'#f3f3f2',
          visibility: 'off'
        }
      ]
    },

会进行一些自定义,但这是我的代码示例(已添加供他人在JSFiddle中检入):

function initMap() {

  var styledMapType = new google.maps.StyledMapType(
      [
        {elementType: 'labels.text.fill', stylers: [{color: '#523735'}]},
        {elementType: 'labels.text.stroke', stylers: [{color: '#f5f1e6'}]},
        {
          featureType: 'administrative',
          elementType: 'geometry.stroke',
          stylers: [{color: '#ff0000'}]
        },
        {
          featureType: 'administrative.province',
          elementType: 'geometry.stroke',
          stylers: [
            {
              visibility: 'off'
            }
          ]
        },
        {
          featureType: 'landscape',
          elementType: 'geometry',
          stylers: [
            {
                color:'#f3f3f2',
              visibility: 'off'
            }
          ]
        },
        {
          featureType: 'poi',
          elementType: 'geometry',
          stylers: [{visibility: 'off'}]
        },
        {
          featureType: 'poi',
          elementType: 'labels',
          stylers: [{visibility: 'off'}]
        },
        {
          featureType: 'road',
          elementType: 'geometry',
          stylers: [{color: '#f5f1e6'}]
        },
        {
          featureType: 'road.arterial',
          elementType: 'geometry',
          stylers: [{color: '#999900'}]
        },
        {
          featureType: 'road.highway',
          elementType: 'geometry',
          stylers: [{color: '#f8c967'}]
        },
        {
          featureType: 'road.highway',
          elementType: 'geometry.stroke',
          stylers: [{color: '#e9bc62'}]
        },
        {
          featureType: 'road.highway.controlled_access',
          elementType: 'geometry',
          stylers: [{color: '#e98d58'}]
        },
        {
          featureType: 'road.highway.controlled_access',
          elementType: 'geometry.stroke',
          stylers: [{color: '#db8555'}]
        },
        {
          featureType: 'road.local',
          elementType: 'labels.text.fill',
          stylers: [{color: '#806b63'}]
        }
      ],
      {name: 'Styled Map'});

  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 42.37, lng: 44.01},
    zoom: 9,
    mapTypeControlOptions: {
      mapTypeIds: ['roadmap', 'satellite', 'hybrid', 'terrain',
              'styled_map']
    }
  });

  map.mapTypes.set('styled_map', styledMapType);
  map.setMapTypeId('styled_map');
}