javascript - 切换到卫星 View 时，隐藏的标签会重新出现

我已经将自定义样式应用于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);

}

最佳答案

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

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

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


MapTypeId.ROADMAP显示默认的道路地图视图。这是默认的地图类型。
MapTypeId.SATELLITE显示Google Earth卫星图像
MapTypeId.HYBRID显示普通视图和卫星视图的混合显示
MapTypeId.TERRAIN基于地形信息显示物理地图。


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>

关于javascript - 切换到卫星 View 时，隐藏的标签会重新出现，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30791363/