javascript - 切换到卫星 View 时隐藏标签再次出现

Question

我已将自定义样式应用于 Javascript Google Maps API (v3.20)。我使用的是自定义样式，它隐藏除道路和水之外的所有标签。在 map View 中时，标签会正确隐藏，但切换到卫星 View 后，标签会永久重新出现(除非您取消选中卫星下的复选框)。这是一个错误还是我做错了什么？

谢谢!

之前:

http://ss.kobitate.com/images/2015-06-11_1656.png

之后:

http://ss.kobitate.com/images/2015-06-11_1659.png

代码:

function initialize() {

    var mapCanvas = document.getElementById('map-canvas');
    var mapOptions = {
        zoom: 15,
        minZoom: 14,
        center: new google.maps.LatLng(32.421205,-81.782044),
        mapTypeId: "custom_map"
    }

    var styleOptions = [
        {
            featureType: 'all',
            elementType: 'labels',
            stylers: [
                { visibility: 'off' }
            ]
        },
        {
            featureType: 'road',
            elementType: 'labels',
            stylers: [
                { visibility: 'on' }
            ]
        },
        {
            featureType: 'water',
            elementType: 'labels',
            stylers: [
                { visibility: 'on' }
            ]
        }
    ];

    var styledMap = {
        name: 'Style Customization'
    }

    map = new google.maps.Map(mapCanvas, mapOptions)

    var customMap = new google.maps.StyledMapType(styleOptions, styledMap);
    map.mapTypes.set("custom_map", customMap);

}

Answer 1

如果您不希望混合 map 类型可用，请将其从可用类型中删除。

https://developers.google.com/maps/documentation/javascript/maptypes

Google Maps API 提供以下 map 类型:

• MapTypeId.ROADMAP 显示默认的道路 map View 。这是默认的 map 类型。
• MapTypeId.SATELLITE 显示 Google 地球卫星图像
• MapTypeId.HYBRID 显示普通 View 和卫星 View 的混合
• MapTypeId.TERRAIN 根据地形信息显示物理 map 。

Documentation on changing the MapTypeRegistry

这将只制作两个按钮(周六/您的)并删除标签复选框。

var mapOptions = {
    zoom: 15,
    minZoom: 14,
    center: new google.maps.LatLng(32.421205, -81.782044),
    mapTypeControlOptions: {
        mapTypeIds: [google.maps.MapTypeId.SATELLITE, "custom_map"]
    },
    mapTypeId: "custom_map"
}

proof of concept fiddle

代码片段:

var map;

function initialize() {

  var mapCanvas = document.getElementById('map-canvas');
  var mapOptions = {
    zoom: 15,
    minZoom: 14,
    center: new google.maps.LatLng(32.421205, -81.782044),
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.SATELLITE, "custom_map"]
    },
    mapTypeId: "custom_map"
  }

  var styleOptions = [{
    featureType: 'all',
    elementType: 'labels',
    stylers: [{
      visibility: 'off'
    }]
  }, {
    featureType: 'road',
    elementType: 'labels',
    stylers: [{
      visibility: 'on'
    }]
  }, {
    featureType: 'water',
    elementType: 'labels',
    stylers: [{
      visibility: 'on'
    }]
  }];

  var styledMap = {
    name: 'Style Customization'
  }

  map = new google.maps.Map(mapCanvas, mapOptions)

  var customMap = new google.maps.StyledMapType(styleOptions, styledMap);
  map.mapTypes.set("custom_map", customMap);

}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map-canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>