谷歌地图如何显示城市或地区轮廓
谷歌地图如何显示城市或地区轮廓
提问于 2015-08-06 17:10:11
如何显示地点或区域轮廓，就像下面的站点所做的那样:我输入一个区域，它显示了该区域的清晰边界。
我在官方地图文档中搜索了几个小时，不知道这些网站是如何显示区域边界的。也看了一些老问题，读了一下就不可能了。
回答 6
Stack Overflow用户
回答已采纳
发布于 2015-08-06 21:16:11
从我搜索的内容来看，目前地图API v3中没有谷歌的选项，还有一个关于Google的问题可以追溯到2008年。 --有一些老问题-- 在google地图结果中添加“搜索区域”大纲、谷歌已经开始用粉色突出显示搜索区域。这个特性在Google 3中可用吗？ --您可能会在这里找到一些更新的信息，但这不是一个功能。
你能做的就是在地图上画形状 -但是要做到这一点，你需要有你的区域边界的坐标。
现在，为了获得管理区域的边界，您必须做一些工作：http://www.gadm.org/country (如果您幸运的话，并且有足够的详细信息可用)。
在这个网站上，您可以在本地下载一个具有.kmz扩展名的文件(有许多可用的格式)。解压缩它，您将有一个.kml文件，其中包含大多数管理区域(城市、村庄)。
<?xml version="1.0" encoding="utf-8" ?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document id="root_doc">
<Schema name="x" id="x">
<SimpleField name="ID_0" type="int"></SimpleField>
<SimpleField name="ISO" type="string"></SimpleField>
<SimpleField name="NAME_0" type="string"></SimpleField>
<SimpleField name="ID_1" type="string"></SimpleField>
<SimpleField name="NAME_1" type="string"></SimpleField>
<SimpleField name="ID_2" type="string"></SimpleField>
<SimpleField name="NAME_2" type="string"></SimpleField>
<SimpleField name="TYPE_2" type="string"></SimpleField>
<SimpleField name="ENGTYPE_2" type="string"></SimpleField>
<SimpleField name="NL_NAME_2" type="string"></SimpleField>
<SimpleField name="VARNAME_2" type="string"></SimpleField>
<SimpleField name="Shape_Length" type="float"></SimpleField>
<SimpleField name="Shape_Area" type="float"></SimpleField>
</Schema>
<Folder><name>x</name>
<Placemark>
<Style><LineStyle><color>ff0000ff</color></LineStyle><PolyStyle><fill>0</fill></PolyStyle></Style>
<ExtendedData><SchemaData schemaUrl="#x">
<SimpleData name="ID_0">186</SimpleData>
<SimpleData name="ISO">ROU</SimpleData>
<SimpleData name="NAME_0">Romania</SimpleData>
<SimpleData name="ID_1">1</SimpleData>
<SimpleData name="NAME_1">Alba</SimpleData>
<SimpleData name="ID_2">1</SimpleData>
<SimpleData name="NAME_2">Abrud</SimpleData>
<SimpleData name="TYPE_2">Comune</SimpleData>
<SimpleData name="ENGTYPE_2">Commune</SimpleData>
<SimpleData name="VARNAME_2">Oras Abrud</SimpleData>
<SimpleData name="Shape_Length">0.2792904164402</SimpleData>
<SimpleData name="Shape_Area">0.00302673357146115</SimpleData>
</SchemaData></ExtendedData>
<MultiGeometry><Polygon><outerBoundaryIs><LinearRing><coordinates>23.117561340332031,46.269237518310547 23.108898162841797,46.265365600585937 23.107486724853629,46.264305114746207 23.104681015014762,46.260105133056641 23.101633071899471,46.250000000000114 23.100803375244254,46.249053955078239 23.097520828247184,46.246582031250114 23.0965576171875,46.245487213134822 23.095674514770508,46.244930267334098 23.092174530029354,46.243438720703182 23.088010787963924,46.240383148193473 23.083366394043082,46.238204956054801 23.075212478637809,46.234935760498047 23.071325302123967,46.239696502685547 23.070602416992131,46.241668701171875 23.069700241088924,46.242824554443416 23.068435668945369,46.243541717529354 23.066627502441406,46.244037628173771 23.064964294433651,46.246234893798885 23.062850952148437,46.247486114501953 23.0626220703125,46.248153686523438 23.062761306762752,46.250873565673942 23.061862945556697,46.255172729492301 23.061449050903434,46.256267547607422 23.05998420715332,46.258060455322322 23.057676315307674,46.259838104248161 23.055141448974666,46.262714385986442 23.053401947021484,46.264244079589901 23.049621582031193,46.266674041748161 23.043565750122013,46.268516540527457 23.041521072387695,46.269458770751953 23.034791946411076,46.270542144775334 23.027051925659293,46.27105712890625 23.025453567504826,46.271255493164063 23.022710800170898,46.272083282470703 23.020351409912053,46.271331787109432 23.018688201904297,46.270687103271598 23.015596389770508,46.270793914794922 23.014116287231502,46.271579742431697 23.009817123413143,46.275333404541016 23.006668090820426,46.277061462402401 23.004106521606445,46.279254913330135 23.001775741577205,46.282882690429688 23.005559921264648,46.283077239990348 23.009967803955135,46.28415679931652 23.014947891235465,46.286224365234489 23.019996643066463,46.28900146484375 23.024263381958121,46.292709350586051 23.027633666992301,46.295299530029411 23.028041839599609,46.295692443847656 23.032444000244197,46.294342041015625 23.03491401672369,46.293315887451229 23.044847488403434,46.290401458740234 23.047790527343807,46.28928375244152 23.053009033203239,46.288627624511719 23.057231903076229,46.288341522216797 23.064565658569393,46.287548065185547 23.070388793945426,46.286254882812614 23.075139999389592,46.284847259521428 23.075983047485465,46.284801483154411 23.085800170898494,46.28253173828125 23.098115921020451,46.280982971191406 23.099718093872127,46.280590057373104 23.105833053588981,46.278388977050838 23.112155914306641,46.274082183837947 23.116207122802791,46.270610809326172 23.117561340332031,46.269237518310547</coordinates></LinearRing></outerBoundaryIs></Polygon></MultiGeometry>
</Placemark>
</Folder>
</Document></kml>从现在开始，当用户搜索一个城市/村庄时，您只需检索边界并在地图- https://developers.google.com/maps/documentation/javascript/overlays#Polygons上绘制这些坐标。
希望这对你有帮助！祝好运!
更新:我使用上面的坐标确定了这个城市的边界。
var ctaLayer = new google.maps.KmlLayer({
url: 'https://www.dropbox.com/s/0grhlim3q4572jp/ROU_adm2%20-%20Copy.kml?dl=1'
});
ctaLayer.setMap(map);(我在我的Dropbox上放了一个小kml文件，里面有一个城市的边界)
请注意，这使用了内置于KML系统中的Google，在该系统中，他们的服务器获取文件，计算视图并将其吐回给您--它的使用有限，我使用它来向您展示边框的外观。在您的应用程序中，您应该能够解析kml文件中的坐标，将它们放在一个数组中(正如多边形文档告诉您的- https://developers.google.com/maps/documentation/javascript/examples/polygon-arrays )并显示它们。
请注意，谷歌在http://www.google.com/maps上设置的边界与您将从这些数据中获得的边界之间存在差异。
祝好运!
UPDATE：http://pastebin.com/x2V1aarJ，http://pastebin.com/Gh55EDW5 --这些都是javascript文件(它们被缩小了，所以我使用了一个在线工具来使它们从网站上可读的)。如果你不完全满意这个我的解决方案，请随时学习它们。
祝你好运！
Stack Overflow用户
发布于 2016-05-25 06:09:43
我在寻找同样的答案，
解决方案是使用样式映射，在下面的链接中，您可以通过向导创建自定义样式，同时进行谷歌地图样式向导测试。
您可以检查所有可用选项：这里
这是我的示例代码，它为州创建边界，并隐藏所有的道路和那里的标签。
var styles = [
{
"featureType": "administrative.province",
"elementType": "geometry.stroke",
"stylers": [
{ "visibility": "on" },
{ "weight": 2.5 },
{ "color": "#24b0e2" }
]
},{
"featureType": "road",
"elementType": "geometry",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "administrative.locality",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "road",
"elementType": "labels",
"stylers": [
{ "visibility": "off" }
]
}
];
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
'address': "rajasthan"
}, (results, status)=> {
var mapOpts = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true,
scrollwheel: false,
styles:styles,
center: results[0].geometry.location,
zoom:6
}
map = new google.maps.Map(document.getElementById("map"), mapOpts);
});Stack Overflow用户
发布于 2016-08-22 22:02:59
所以我有一个不完美的解决方案，但它对我有效。使用来自Google的多边形示例，并使用Google上的精确点来获取lat & long位置。
卡尔加里针尖
我用了我所说的“视觉复制和粘贴”，你看屏幕，然后写下你想要的数字;-)
<style>
#map {
height: 500px;
}
</style>
<script>
// This example creates a simple polygon representing the host city of the
// Greatest Outdoor Show On Earth.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 9,
center: {lat: 51.039, lng: -114.204},
mapTypeId: 'terrain'
});
// Define the LatLng coordinates for the polygon's path.
var triangleCoords = [
{lat: 51.183, lng: -114.234},
{lat: 51.154, lng: -114.235},
{lat: 51.156, lng: -114.261},
{lat: 51.104, lng: -114.259},
{lat: 51.106, lng: -114.261},
{lat: 51.102, lng: -114.272},
{lat: 51.081, lng: -114.271},
{lat: 51.081, lng: -114.234},
{lat: 51.009, lng: -114.236},
{lat: 51.008, lng: -114.141},
{lat: 50.995, lng: -114.142},
{lat: 50.998, lng: -114.160},
{lat: 50.984, lng: -114.163},
{lat: 50.987, lng: -114.141},
{lat: 50.979, lng: -114.141},
{lat: 50.921, lng: -114.141},
{lat: 50.921, lng: -114.210},
{lat: 50.893, lng: -114.210},
{lat: 50.892, lng: -114.140},
{lat: 50.888, lng: -114.139},
{lat: 50.878, lng: -114.094},
{lat: 50.878, lng: -113.994},
{lat: 50.840, lng: -113.954},
{lat: 50.854, lng: -113.905},
{lat: 50.922, lng: -113.906},
{lat: 50.935, lng: -113.877},
{lat: 50.943, lng: -113.877},
{lat: 50.955, lng: -113.912},
{lat: 51.183, lng: -113.910}
];
// Construct the polygon.
var bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
}
</script>
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/jskey=YOUR_API_KEY&callback=initMap">
</script>这给了你卡尔加里的提纲。我在这里附了一张照片。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31861822
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号