切换到卫星视图时隐藏的标签重新出现

Question

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

谢谢！

之前：

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

如果您不希望 HYBRID 地图类型可用，请将其从可用类型中删除。

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

Google Maps API 提供以下地图类型：

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

Documentation on changing the MapTypeRegistry

这将只制作两个按钮（Sat/yours）并删除标签复选框。

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

代码 sn-p：

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>