本文介绍了谷歌地图隐藏较小的城市(当地)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用地图样式器，并试图隐藏所有小城市的标签.问题是它们都被列为地区.所以如果我关闭featureType":locality"，它甚至会关闭大城市.
I am using map styler and I am trying to hide the label of all small cities. the problem is that they are all listed as localities. so if I turn off the "featureType": "locality" it turns off even big cities.
请查看此谷歌地图链接上的位置，当您缩小大城市时，您会看到例如巴西利亚"和戈亚尼亚"的标签更大更醒目.而周围其他较小的城市则使用较小的字体大小标签.
Please have a look at the location on this google maps link, you will see when you zoom out bigger cities as for example 'Brasilia' and 'Goiania' have a bigger and bolder label. While the other smaller cities around have smaller font size label.
很明显，谷歌地图在默认情况下对不同大小的城市进行了不同的设计.
So obviously google maps by default is styling different sizes cities differently.
如何为那些较小的城市标签创建自己的风格?
how could I create my own style for those smaller cities labels?
我试过 "featureType": "locality.sub_locality" 但它隐藏了所有地点，包括大城市.
I tried "featureType": "locality.sub_locality" but it hides all localities including the big cities.
推荐答案
一种选择是隐藏所有地区 (locality.sub_locality")，然后为您希望可见的大城市添加您自己的标签.
One option would be to hid all the localities ("locality.sub_locality"), then add your own labels for the big cities that you want visible.
使用来自 geonames.org 的一小部分城市样本进行概念验证
代码片段:
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/[email protected]/dist/infobox.js"></script>
<div id="bounds"></div>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>这篇关于谷歌地图隐藏较小的城市(当地)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！