切換到衛星視圖時，隱藏的標簽會重新出現

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 Earth衛星圖像
• MapTypeId.HYBRID顯示普通視圖和衛星視圖的混合顯示
• MapTypeId.TERRAIN基於地形信息顯示物理地圖。

有關更改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"
}

概念證明

代碼段：

 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>