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

代码段

＆＃13;

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);

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: