javascript - 谷歌地图不应用样式

Question

我正在使用带有 kml 的谷歌地图，并且我只想显示国家/地区标签。默认情况下，它只显示简单的世界地图，上面什么也没有。 https://gateway.spectrumasa.com/qc/mcmap/

我的原始代码

var myOptions = {
        zoom : currentZoomLevel,
        center : latlng,
        disableDefaultUI: true,
        minZoom: 2, 
        maxZoom: 20,
        mapTypeId : google.maps.MapTypeId.SATELLITE,
    };  


    map = new google.maps.Map(document.getElementById("googlemap"), myOptions);

带有样式的新代码

var styleArray = [
                      {
                        featureType: "all",
                        stylers: [
                          {  visibility: "off" }
                        ]
                      }/*,{
                        featureType: "road.arterial",
                        elementType: "geometry",
                        stylers: [
                          { hue: "#00ffee" },
                          { saturation: 50 }
                        ]
                      },{
                        featureType: "poi.business",
                        elementType: "labels",
                        stylers: [
                          { visibility: "off" }
                        ]
                      }*/
                    ];


    var latlng = new google.maps.LatLng(24.91654, 15.31326);
    var myOptions = {
        zoom : currentZoomLevel,
        center : latlng,
        disableDefaultUI: true,
        minZoom: 2, 
        maxZoom: 20,
        mapTypeId : google.maps.MapTypeId.SATELLITE,
        styles :styleArray /*[ { "featureType": "administrative.country", "elementType": "labels", "stylers": [ { "visibility": "on" } ] } ]*/
    };  


    map = new google.maps.Map(document.getElementById("googlemap"), myOptions);

Answer 1

我认为您实际上可以通过使用HYBRID map 样式获得您想要的东西。关闭所有内容，然后仅打开 administrative.country 标签。

var mapOptions = {
    center: new google.maps.LatLng(52.368465, 4.903921),
    zoom: 6,
    mapTypeId: google.maps.MapTypeId.HYBRID,
    styles: [{
        'featureType': 'all',
            'elementType': 'all',
            'stylers': [{
            'visibility': 'off'
        }]
    }, {
        "featureType": "administrative.country",
            "elementType": "labels",
            "stylers": [{
            "visibility": "on"
        }]
    }]
};

map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

JSFiddle demo