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

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

以下地圖類型的谷歌地圖API提供：

• MapTypeId.ROADMAP顯示默認的道路地圖視圖。這是默認的地圖類型。
• MapTypeId.SATELLITE顯示谷歌地球衛星圖像
• 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>