谷歌地图不应用风格

google maps not applying style

本文关键字：风格 应用 谷歌地图      更新时间：2023-09-26

我使用谷歌地图与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);

我认为您实际上可以通过使用HYBRID地图样式得到您想要的。关闭一切，然后只打开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);
<<p> JSFiddle演示/kbd>

对于那些正在与谷歌地图不使用定义样式作斗争的人，我想指出样式是不工作，除非你有一个有效的API密钥。

这有点令人困惑，因为谷歌地图在没有API密钥的情况下工作，上面有深色的覆盖层，上面写着"For development目的"。所以我没有想到有些功能会被忽略。

相关文章：