我正在使用地图样式器，并试图隐藏所有小城市的标签。问题是它们都被列为地方。所以如果我关闭 "featureType": "locality" 它甚至会关闭大城市。
请查看此谷歌地图链接上的位置，当您缩小较大的城市时，您会看到，例如“巴西利亚”和“戈亚尼亚”的标签更大更粗。而周围其他较小的城市则有较小的字体大小标签。
显然，默认情况下，谷歌地图对不同大小城市的样式不同。
我怎样才能为那些较小的城市标签创建自己的风格？
我尝试了 "featureType": "locality.sub_locality" 但它隐藏了所有地区，包括大城市。
【问题讨论】：
标签： api google-maps styles
一种选择是隐藏所有地点（“locality.sub_locality”），然后为您想要显示的大城市添加您自己的标签。
proof of concept fiddle using a small sample of cities from geonames.org
代码sn-p：
function initialize() {
var map = new google.maps.Map(document.getElementById('map-canvas'), {
styles: [{
"featureType": "administrative.locality",
"elementType": "labels",
"stylers": [{
"visibility": "off"
}]
}]
});
google.maps.event.addListener(map, 'zoom_changed', function() {
for (var i = 0; i < mapLabels.length; i++) {
if (map.getZoom() > 5) {
mapLabels[i].setVisible(true);
} else {
mapLabels[i].setVisible(false);
}
}
});
google.maps.event.addListener(map, 'bounds_changed', function() {
document.getElementById('bounds').innerHTML = map.getBounds().toUrlValue(6);
});
var bounds = new google.maps.LatLngBounds();
var mapLabels = [];
for (var i = 0; i < citiesJSON.geonames.length; i++) {
var marker = new google.maps.Marker({
position: {
lat: citiesJSON.geonames[i].lat,
lng: citiesJSON.geonames[i].lng
},
// map:map,
title: citiesJSON.geonames[i].name
});
bounds.extend(marker.getPosition());
var myOptions = {
content: citiesJSON.geonames[i].name,
boxStyle: {
border: "none",
textAlign: "center",
fontSize: "8pt",
width: "100px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-50, 0),
position: new google.maps.LatLng(citiesJSON.geonames[i].lat,
citiesJSON.geonames[i].lng),
closeBoxURL: "",
isHidden: false,
pane: "mapPane",
enableEventPropagation: true
};
var ibLabel = new InfoBox(myOptions);
ibLabel.open(map);
mapLabels.push(ibLabel);
}
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);
var citiesJSON = {
"geonames": [{
"lng": -47.92972,
"geonameId": 3469058,
"countrycode": "BR",
"name": "Brasília",
"fclName": "city, village,...",
"toponymName": "Brasília",
"fcodeName": "capital of a political entity",
"wikipedia": "en.wikipedia.org/wiki/Bras%C3%ADlia",
"lat": -15.77972,
"fcl": "P",
"population": 2207718,
"fcode": "PPLC"
}, {
"lng": -49.25388889,
"geonameId": 3462377,
"countrycode": "BR",
"name": "Goiânia",
"fclName": "city, village,...",
"toponymName": "Goiânia",
"fcodeName": "seat of a first-order administrative division",
"wikipedia": "en.wikipedia.org/wiki/Goi%C3%A2nia",
"lat": -16.67861111,
"fcl": "P",
"population": 1171195,
"fcode": "PPLA"
}, {
"lng": -47.81027778,
"geonameId": 3451328,
"countrycode": "BR",
"name": "Ribeirão Preto",
"fclName": "city, village,...",
"toponymName": "Ribeirão Preto",
"fcodeName": "seat of a second-order administrative division",
"wikipedia": "en.wikipedia.org/wiki/Ribeir%C3%A3o_Preto",
"lat": -21.1775,
"fcl": "P",
"population": 619746,
"fcode": "PPLA2"
}, {
"lng": -48.27722222,
"geonameId": 3445831,
"countrycode": "BR",
"name": "Uberlândia",
"fclName": "city, village,...",
"toponymName": "Uberlândia",
"fcodeName": "populated place",
"wikipedia": "en.wikipedia.org/wiki/Uberl%C3%A2ndia",
"lat": -18.91861111,
"fcl": "P",
"population": 563536,
"fcode": "PPL"
}, {
"lng": -49.37944444,
"geonameId": 3448639,
"countrycode": "BR",
"name": "São José do Rio Preto",
"fclName": "city, village,...",
"toponymName": "São José do Rio Preto",
"fcodeName": "seat of a second-order administrative division",
"wikipedia": "en.wikipedia.org/wiki/S%C3%A3o_Jos%C3%A9_do_Rio_Preto",
"lat": -20.81972222,
"fcl": "P",
"population": 374699,
"fcode": "PPLA2"
}, {
"lng": -48.95277778,
"geonameId": 3472287,
"countrycode": "BR",
"name": "Anápolis",
"fclName": "city, village,...",
"toponymName": "Anápolis",
"fcodeName": "populated place",
"wikipedia": "en.wikipedia.org/wiki/An%C3%A1polis",
"lat": -16.32666667,
"fcl": "P",
"population": 319587,
"fcode": "PPL"
}, {
"lng": -47.40083333,
"geonameId": 3463011,
"countrycode": "BR",
"name": "Franca",
"fclName": "city, village,...",
"toponymName": "Franca",
"fcodeName": "seat of a second-order administrative division",
"wikipedia": "en.wikipedia.org/wiki/Franca",
"lat": -20.53861111,
"fcl": "P",
"population": 305041,
"fcode": "PPLA2"
}, {
"lng": -47.93194444,
"geonameId": 3445839,
"countrycode": "BR",
"name": "Uberaba",
"fclName": "city, village,...",
"toponymName": "Uberaba",
"fcodeName": "populated place",
"wikipedia": "en.wikipedia.org/wiki/Uberaba",
"lat": -19.74833333,
"fcl": "P",
"population": 260843,
"fcode": "PPL"
}, {
"lng": -47.95027778,
"geonameId": 3458329,
"countrycode": "BR",
"name": "Luziânia",
"fclName": "city, village,...",
"toponymName": "Luziânia",
"fcodeName": "populated place",
"wikipedia": "en.wikipedia.org/wiki/Luzi%C3%A2nia",
"lat": -16.2525,
"fcl": "P",
"population": 143601,
"fcode": "PPL"
}, {
"lng": -46.51805556,
"geonameId": 3454783,
"countrycode": "BR",
"name": "Patos de Minas",
"fclName": "city, village,...",
"toponymName": "Patos de Minas",
"fcodeName": "populated place",
"wikipedia": "en.wikipedia.org/wiki/Patos_de_Minas",
"lat": -18.57888889,
"fcl": "P",
"population": 126234,
"fcode": "PPL"
}]
};html,
body,
#map-canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://cdn.jsdelivr.net/npm/google-maps-utility-library-v3-infobox@1.1.14/dist/infobox.js"></script>
<div id="bounds"></div>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>【讨论】：