仅在Google Maps Api中显示城市地区名称

Question

我只想在我的google地图api中显示城市地区名称。现在我可以看到地图上的所有标签名称，但是我想显示城市地区名称，这通常在普通的Google地图中以更高的缩放级别显示。

也许你可以将标签名称的可见性设置为一定的缩放级别，然后在缩放级别11之后再将其打开?这样的事情可能发生吗?

提前感谢!

var mapProp = {
    center: new google.maps.LatLng(52.368465, 4.903921),
    zoom: 11,
    styles: [{
        'featureType': 'all',
        'elementType': 'labels',
        'stylers': [{
            'visibility': 'off'
        }]
    }, {
        'featureType': 'transit',
        'elementType': 'labels',
        'stylers': [{
            'visibility': 'off'
        }]
    }, {
        'featureType': 'poi',
        'elementType': 'labels',
        'stylers': [{
            'visibility': 'off'
        }]
    }, {
        'featureType': 'water',
        'elementType': 'labels',
        'stylers': [{
            'visibility': 'off'
        }]
    }, {
        'featureType': 'road',
        'elementType': 'labels.icon',
        'stylers': [{
            'visibility': 'off'
        }]
    }, {
        'stylers': [{
            'hue': '#00aaff'
        }, {
            'saturation': -50
        }, {
            'gamma': 1.15
        }, {
            'lightness': 12
        }]
    }, {
        'featureType': 'road',
        'elementType': 'labels.text.fill',
        'stylers': [{
            'visibility': 'on'
        }, {
            'lightness': 24
        }]
    }, {
        'featureType': 'road',
        'elementType': 'geometry',
        'stylers': [{
            'lightness': 85
        }]
    }],
    streetViewControl: false,
    panControl: false,
    mapTypeControl: false,
    mapTypeId: google.maps.MapTypeId.ROAD
};

Answer 1

我创建了两个变量lowLevelStyles和highLevelStyles，其中包含您想要根据缩放级别应用的不同样式。然后在zoom_changed上创建一个监听器，就像我上面的评论建议的那样。然后你可以根据你的缩放级别应用这些样式:

google.maps.event.addListener(map, 'zoom_changed', function () {
    var zoomLevel = map.getZoom();
    document.getElementById('zoomLevel').innerHTML = 'Zoom Level: ' + zoomLevel;
    if (zoomLevel > 10) {
        map.setOptions(highLevelStyles);
    } else {
        map.setOptions(lowLevelStyles);
    }
});

JSFiddle