在Google地图中只显示特定城市的标签 [英] Display labels only to specific cities in Google Maps
本文介绍了在Google地图中只显示特定城市的标签的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有连接地图上两点的多段线。
我只想为这两点显示标签，并隐藏所有其他标签。
我已经探索了Google Maps API以了解Styled Maps的工作原理。使用隐藏功能，我可以隐藏和显示不同粒度的标签，但是我无法实现只显示两个城市标签。例如，如果我有一条连接线，圣何塞和纽约，只有圣何塞和纽约的标签应该显示在地图上，其他所有标签都隐藏。目前我所看到的是我可以将标签隐藏在administrative.province级别，但它也隐藏了圣何塞和纽约的标签。
这里有一段代码，我对于折线和隐藏某些功能。
<！DOCTYPE html>< html> < HEAD> < meta name =viewportcontent =initial-scale = 1.0，user-scalable = no> < meta charset =utf-8> < title>简单多段线< / title> <风格> html，body，＃map-canvas {height：100％; margin：0px; padding：0px}< / style> < script src =https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true>< / script> < script> function initialize（）{var MY_MAPTYPE_ID ='custom_style'; // var MY_MAPTYPE_ID = google.maps.MapTypeId.ROADMAP; var featureOpts = [{stylers：[// {hue：'＃890000'}，{visibility：'on'}]}，{elementType：'labels'，stylers：[{visibility：'off'}]}，{ featureType：administrative.country，elementType：labels，stylers：[{visibility：off}]}，{featureType：administrative.locality，elementType：labels，stylers：[{visibility：on }]}，{featureType：'road'，stylers：[{color：'＃00FF00'}，{visibility：'off'}]}]; var mapOptions = {zoom：3，center：new google.maps.LatLng（0，-180），mapTypeControlOptions：{mapTypeIds：[google.maps.MapTypeId.TERRAIN，MY_MAPTYPE_ID]}，mapTypeId：MY_MAPTYPE_ID}; var map = new google.maps.Map（document.getElementById（'map-canvas'），mapOptions）; var styledMapOptions = {name：'Custom Style'}; var flightPlanCoordinates = [new google.maps.LatLng（40.7127，-74.0059），new google.maps.LatLng（-27.46758,153.027892）]; var flightPlanCoordinates1 = [new google.maps.LatLng（50.7127，-74.0059），new google.maps.LatLng（-27.46758,153.027892）]; var flightArray = []; flightArray.push（flightPlanCoordinates）; flightArray.push（flightPlanCoordinates1）; var colorArray = []; colorArray.push（＃FF0000’ ）; （var i = 0; i< flightArray.length; i ++）{var flightPath = new google.maps.Polyline（{path： flightArray [i]，geodesic：true，strokeColor：colorArray [i]，strokeOpacity：1.0，strokeWeight：1}）; var customMapType = new google.maps.StyledMapType（featureOpts，styledMapOptions）; map.mapTypes.set（MY_MAPTYPE_ID，customMapType）; flightPath.setMap（地图）; }} google.maps.event.addDomListener（window，'load'，initialize）; < /脚本> < /头> <身体GT; < div id =map-canvas>< / div> < / body>< / html>
解决方案
来自 Google地图的示例隐藏了较小的城市（本地人）用你的代码/多段线：
$ b
function initialize（）{var MY_MAPTYPE_ID = 'custom_style'; // var MY_MAPTYPE_ID = google.maps.MapTypeId.ROADMAP; var featureOpts = [{stylers：[// {hue：'＃890000'}，{visibility：'on'}]}，{elementType：'labels'，stylers：[{visibility：'off'}]}，{ featureType：administrative.country，elementType：labels，stylers：[{visibility：off}]}，{featureType：administrative.locality，elementType：labels，stylers：[{visibility：off }]}，{featureType：'road'，stylers：[{color：'＃00FF00'}，{visibility：'off'}]}]; var mapOptions = {zoom：3，center：new google.maps.LatLng（0，-180），mapTypeControlOptions：{mapTypeIds：[google.maps.MapTypeId.TERRAIN，MY_MAPTYPE_ID]}，mapTypeId：MY_MAPTYPE_ID}; var map = new google.maps.Map（document.getElementById（'map-canvas'），mapOptions）; var styledMapOptions = {name：'Custom Style'}; var flightPlanCoordinates = [new google.maps.LatLng（40.7127，-74.0059），new google.maps.LatLng（-27.46758,153.027892）]; var flightPlanCoordinates1 = [new google.maps.LatLng（50.7127，-74.0059），new google.maps.LatLng（-27.46758,153.027892）]; var flightArray = []; flightArray.push（flightPlanCoordinates）; flightArray.push（flightPlanCoordinates1）; var colorArray = []; colorArray.push（＃FF0000’ ）; colorArray.push（＃00FF00’ ）; //用于在浏览器中显示多段线的代码（var i = 0; i< flightArray.length; i ++）{var flightPath = new google.maps.Polyline（{path：flightArray [i]，geodesic：true，strokeColor ：colorArray [i]，strokeOpacity：1.0，strokeWeight：1}）; var customMapType = new google.maps.StyledMapType（featureOpts，styledMapOptions）; map.mapTypes.set（MY_MAPTYPE_ID，customMapType）; flightPath.setMap（地图）; } var citiesJSON = {geonames：[{lat：40.7127，lng：-74.0059，name：New York}，{lat：-27.46758，lng：153.027892，name：Brisbane}，{lat：50.7127，lng： -74.0059，name：Quebec}]}; var mapLabels = []; for（var i = 0; i< citiesJSON.geonames.length; i ++）{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，窗格：mapPane，enableEventPropagation：true}; var ibLabel = new InfoBox（myOptions）; ibLabel.open（地图）; mapLabels.push（ibLabel）; var marker = new google.maps.Marker（{position：new google.maps.LatLng（citiesJSON.geonames [i] .lat，citiesJSON.geonames [i] .lng），map：map，icon：{path：google。 maps.SymbolPath.CIRCLE，scale：2}}）; }} google.maps.event.addDomListener（window，'load'，initialize）;
html，body，＃map-canvas {height：100％; margin：0px; < script src =https：//
/ div>
I have polylines connecting two points on the map.
I want to display labels only for those two points, and hide all other labels.
I have explored the Google Maps API to see how Styled Maps work. Using the hiding features, I could achieve hiding and display of labels at various granularities, but what I fail to achieve displaying only two city labels.
For instance, if I have a line connecting, San Jose and New York, only San Jose and New York labels should be displayed on the maps, with all other labels hidden. Currently what I see is that I can hide labels at administrative.province level, but it hides San Jose and New York labels as well.
Here's a snippet of code that I have for polyline and hiding some features.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple Polylines</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
function initialize() {
var MY_MAPTYPE_ID = 'custom_style';
//var MY_MAPTYPE_ID = google.maps.MapTypeId.ROADMAP;
var featureOpts = [
{
stylers: [
// { hue: '#890000' },
{ visibility: 'on' }
]
},
{
elementType: 'labels',
stylers: [
{ visibility: 'off' }
]
},
{
featureType: "administrative.country",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},
{
featureType: "administrative.locality",
elementType: "labels",
stylers: [
{ visibility: "on" }
]
},
{
featureType: 'road',
stylers: [
{ color: '#00FF00' },
{ visibility: 'off' }
]
}
];
var mapOptions = {
zoom: 3,
center: new google.maps.LatLng(0, -180),
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.TERRAIN, MY_MAPTYPE_ID]
},
mapTypeId: MY_MAPTYPE_ID
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var styledMapOptions = {
name: 'Custom Style'
};
var flightPlanCoordinates = [
new google.maps.LatLng(40.7127, -74.0059),
new google.maps.LatLng(-27.46758, 153.027892)
];
var flightPlanCoordinates1 = [
new google.maps.LatLng(50.7127, -74.0059),
new google.maps.LatLng(-27.46758, 153.027892)
];
var flightArray = [];
flightArray.push(flightPlanCoordinates);
flightArray.push(flightPlanCoordinates1);
var colorArray = [];
colorArray.push('#FF0000');
colorArray.push('#00FF00');
// Code for displaying the polylines in the browser
for(var i=0; i < flightArray.length; i++) {
var flightPath = new google.maps.Polyline({
path: flightArray[i],
geodesic: true,
strokeColor: colorArray[i],
strokeOpacity: 1.0,
strokeWeight: 1
});
var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);
map.mapTypes.set(MY_MAPTYPE_ID, customMapType);
flightPath.setMap(map);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
解决方案 Example from Google maps hide smaller cities (localites) with your code/polylines:
function initialize() {
var MY_MAPTYPE_ID = 'custom_style';
//var MY_MAPTYPE_ID = google.maps.MapTypeId.ROADMAP;
var featureOpts = [{
stylers: [
// { hue: '#890000' },
{
visibility: 'on'
}
]
}, {
elementType: 'labels',
stylers: [{
visibility: 'off'
}]
}, {
featureType: "administrative.country",
elementType: "labels",
stylers: [{
visibility: "off"
}]
}, {
featureType: "administrative.locality",
elementType: "labels",
stylers: [{
visibility: "off"
}]
}, {
featureType: 'road',
stylers: [{
color: '#00FF00'
}, {
visibility: 'off'
}]
}];
var mapOptions = {
zoom: 3,
center: new google.maps.LatLng(0, -180),
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.TERRAIN, MY_MAPTYPE_ID]
},
mapTypeId: MY_MAPTYPE_ID
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var styledMapOptions = {
name: 'Custom Style'
};
var flightPlanCoordinates = [
new google.maps.LatLng(40.7127, -74.0059),
new google.maps.LatLng(-27.46758, 153.027892)
];
var flightPlanCoordinates1 = [
new google.maps.LatLng(50.7127, -74.0059),
new google.maps.LatLng(-27.46758, 153.027892)
];
var flightArray = [];
flightArray.push(flightPlanCoordinates);
flightArray.push(flightPlanCoordinates1);
var colorArray = [];
colorArray.push('#FF0000');
colorArray.push('#00FF00');
// Code for displaying the polylines in the browser
for (var i = 0; i < flightArray.length; i++) {
var flightPath = new google.maps.Polyline({
path: flightArray[i],
geodesic: true,
strokeColor: colorArray[i],
strokeOpacity: 1.0,
strokeWeight: 1
});
var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);
map.mapTypes.set(MY_MAPTYPE_ID, customMapType);
flightPath.setMap(map);
}
var citiesJSON = {
geonames: [{
lat: 40.7127,
lng: -74.0059,
name: "New York"
}, {
lat: -27.46758,
lng: 153.027892,
name: "Brisbane"
}, {
lat: 50.7127,
lng: -74.0059,
name: "Quebec"
}]
};
var mapLabels = [];
for (var i = 0; i < citiesJSON.geonames.length; i++) {
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);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(citiesJSON.geonames[i].lat,
citiesJSON.geonames[i].lng),
map: map,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 2
}
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
height: 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"></div>
这篇关于在Google地图中只显示特定城市的标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
