谷歌地图隐藏小城市（localites） [英] Google maps hide smaller cities (localites)
本文介绍了谷歌地图隐藏小城市（localites）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用的地图造型，我试图隐藏所有小城市的标签。问题是，他们都被列为地方。所以，如果我关掉类型特征：地方，它会关闭甚至大城市
请看看这个谷歌地图链接的位置，你会看到，当你缩小大城市作为例如巴西利亚和戈亚尼亚有一个更大，更大胆的标签。而其他小城市各地拥有更小的字体大小的标签。
所以，很显然谷歌默认的地图以不同的造型不同规模的城市。
<一个href=\"https://www.google.com.au/maps/place/Faina,+State+of+Goi%C3%A1s,+Brazil/@-15.4463132,-50.4081042,8z/data=!4m2!3m1!1s0x9367dd6707a3d11d:0xd225bdabe7eabd49\" rel=\"nofollow\">https://www.google.com.au/maps/place/Faina,+State+of+Goi%C3%A1s,+Brazil/@-15.4463132,-50.4081042,8z/data=!4m2!3m1!1s0x9367dd6707a3d11d:0xd225bdabe7eabd49
我如何可以创建我自己的风格对于那些小城市的标签？
我试过类型特征：locality.sub_locality，但它隐藏了所有地区，包括大城市
。解决方案
一个办法是躲在所有的地方（locality.sub_locality），然后加上自己的标签，你想看到的大城市。
使用城市的一个小样本的概念小提琴证明从geonames.org
code片断：
\r
\r\r
\r函数初始化（）{\r
VAR地图=新google.maps.Map（的document.getElementById（'地图画布'）{\r
款式：[{\r
类型特征：administrative.locality，\r
元素类型：标签，\r
造型器：[{\r
可见性：关\r
}]\r
}]\r
}）;\r
google.maps.event.addListener（地图部分zoom_changed'，函数（）{\r
对于（VAR I = 0; I＆LT; mapLabels.length;我++）{\r
如果（map.getZoom（）大于5）{\r
mapLabels [I] .setVisible（真）;\r
}其他{\r
mapLabels [I] .setVisible（假）;\r
}\r
}\r
}）;\r
google.maps.event.addListener（地图的bounds_changed'，函数（）{\r
。的document.getElementById（'边界'）的innerHTML = map.getBounds（）toUrlValue（6）。\r
}）;\r
VAR边界=新的google.maps.LatLngBounds（）;\r
变种mapLabels = [];\r
\r
对于（VAR I = 0; I＆LT; citiesJSON.geonames.length;我++）{\r
VAR的标记=新google.maps.Marker（{\r
位置：{\r
纬度：citiesJSON.geonames [I] .lat，\r
LNG：citiesJSON.geonames [I] .lng\r
}，\r
//地图：地图，\r
标题：citiesJSON.geonames [我]。名称\r
}）;\r
bounds.extend（marker.getPosition（））;\r
VAR myOptions = {\r
内容：citiesJSON.geonames [I] .name和\r
boxStyle：{\r
边框：无，\r
设置textAlign：中心，\r
字体：8PT\r
宽度：100像素\r
}，\r
disableAutoPan：真实，\r
pixelOffset，用于新为google.maps.Size（-50，0），\r
位置：新google.maps.LatLng（citiesJSON.geonames [I] .lat，\r
citiesJSON.geonames [I] .lng）\r
closeBoxURL：，\r
是否隐藏：假的，\r
窗格：mapPane\r
enableEventPropagation：真\r
};\r
\r
VAR ibLabel =新的信息框（myOptions）;\r
ibLabel.open（地图）;\r
mapLabels.push（ibLabel）;\r
}\r
map.fitBounds（边界）;\r
}\r
google.maps.event.addDomListener（窗口，在负荷，初始化）;\r
VAR citiesJSON = {\r
GEONAMES：[{\r
LNG：-47.92972，\r
geonameId：3469058，\r
国家code：BR\r
名：巴西利亚\r
fclName：城市，村庄，...\r
toponymName：巴西利亚，\r
F codeNAME：一个政治实体的资本，\r
维基百科：en.wikipedia.org/wiki/Bras%C3%ADlia\r
纬度：-15.77972，\r
FCL：P\r
人口：2207718，\r
F code：PPLC\r
}，{\r
LNG：-49.25388889，\r
geonameId：3462377，\r
国家code：BR\r
名：戈亚尼亚\r
fclName：城市，村庄，...\r
toponymName：戈亚尼亚，\r
F codeNAME：一阶行政区划所在地\r
维基百科：en.wikipedia.org/wiki/Goi%C3%A2nia\r
纬度：-16.67861111，\r
FCL：P\r
人口：1171195，\r
F code：PPLA\r
}，{\r
LNG：-47.81027778，\r
geonameId：3451328，\r
国家code：BR\r
名：里贝朗普雷preTO\r
fclName：城市，村庄，...\r
toponymName：里贝朗普雷preTO\r
F codeNAME：第二次行政区划所在地\r
维基百科：en.wikipedia.org/wiki/Ribeir%C3%A3o_$p$pto\r
纬度：-21.1775，\r
FCL：P\r
人口：619746，\r
F code：PPLA2\r
}，{\r
LNG：-48.27722222，\r
geonameId：3445831，\r
国家code：BR\r
名：乌贝兰迪亚\r
fclName：城市，村庄，...\r
toponymName：乌贝兰迪亚，\r
F codeNAME：人口的地方，\r
维基百科：en.wikipedia.org/wiki/Uberl%C3%A2ndia\r
纬度：-18.91861111，\r
FCL：P\r
人口：563536，\r
F code：PPL\r
}，{\r
LNG：-49.37944444，\r
geonameId：3448639，\r
国家code：BR\r
名：圣若泽里约preTO\r
fclName：城市，村庄，...\r
toponymName：圣若泽里约preTO\r
F codeNAME：第二次行政区划所在地\r
维基百科：en.wikipedia.org/wiki/S%C3%A3o_Jos%C3%A9_do_Rio_$p$pto\r
纬度：-20.81972222，\r
FCL：P\r
人口：374699，\r
F code：PPLA2\r
}，{\r
LNG：-48.95277778，\r
geonameId：3472287，\r
国家code：BR\r
名：阿纳波利斯\r
fclName：城市，村庄，...\r
toponymName：阿纳波利斯，\r
F codeNAME：人口的地方，\r
维基百科：en.wikipedia.org/wiki/An%C3%A1polis\r
纬度：-16.32666667，\r
FCL：P\r
人口：319587，\r
F code：PPL\r
}，{\r
LNG：-47.40083333，\r
geonameId：3463011，\r
国家code：BR\r
名：弗兰卡\r
fclName：城市，村庄，...\r
toponymName：Franca的，\r
F codeNAME：第二次行政区划所在地\r
维基百科：en.wikipedia.org/wiki/Franca\r
纬度：-20.53861111，\r
FCL：P\r
人口：305041，\r
F code：PPLA2\r
}，{\r
LNG：-47.93194444，\r
geonameId：3445839，\r
国家code：BR\r
名：乌贝拉巴\r
fclName：城市，村庄，...\r
toponymName：乌贝拉巴\r
F codeNAME：人口的地方，\r
维基百科：en.wikipedia.org/wiki/Uberaba\r
纬度：-19.74833333，\r
FCL：P\r
人口：260843，\r
F code：PPL\r
}，{\r
LNG：-47.95027778，\r
geonameId：3458329，\r
国家code：BR\r
名：卢齐阿尼亚\r
fclName：城市，村庄，...\r
toponymName：卢齐阿尼亚，\r
F codeNAME：人口的地方，\r
维基百科：en.wikipedia.org/wiki/Luzi%C3%A2nia\r
纬度：-16.2525，\r
FCL：P\r
人口：143601，\r
F code：PPL\r
}，{\r
LNG：-46.51805556，\r
geonameId：3454783，\r
国家code：BR\r
名：帕图斯迪米纳斯\r
fclName：城市，村庄，...\r
toponymName：帕图斯迪米纳斯\r
F codeNAME：人口的地方，\r
维基百科：en.wikipedia.org/wiki/Patos_de_Minas\r
纬度：-18.57888889，\r
FCL：P\r
人口：126234，\r
F code：PPL\r
}]\r
}; \r
HTML，\r
身体，\r
＃地图帆布{\r
高度：100％;\r
宽度：100％;\r
保证金：0像素;\r
填充：0像素\r
} \r
＆LT;脚本SRC =https://maps.googleapis.com/maps / API / JS＆GT;＆LT; / SCRIPT＆GT;\r
＆LT;脚本src=\"https://google-maps-utility-library-v3.google$c$c.com/svn/trunk/infobox/src/infobox.js\"></script>\r
＆LT; DIV ID =地图画布的风格=边界：2px的固体＃3872ac;＆GT;＆LT; / DIV＆GT; \r
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?
I tried "featureType": "locality.sub_locality" but it hides all localities including the big cities.
解决方案
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.
proof of concept fiddle using a small sample of cities from geonames.org
code snippet:
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"></script>
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>
这篇关于谷歌地图隐藏小城市（localites）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
