使用 Google Maps JavaScript API 绘制轮廓和阴影区域
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15184584/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Outline and shade regions using the Google Maps JavaScript API
提问by Bj?rn3
The Google Maps web application geocodes and outlines regional areas in a very nice fashion. Is this possible through the Google Maps JavaScript API? An example of the website:
Google Maps Web 应用程序以非常好的方式对区域进行地理编码并勾勒出区域轮廓。这可以通过 Google Maps JavaScript API 实现吗？网站示例：
This is the county of Sk?ne in Sweden. The Google Maps web application outlines it in red and shades it pink. I want to geocode and display regions like this with the Google Maps JavaScript API. How?
这是瑞典的 Sk?ne 县。Google Maps 网络应用程序以红色勾勒出它的轮廓，将其涂成粉红色。我想使用 Google Maps JavaScript API 对这样的区域进行地理编码和显示。如何？
回答by Apostolos Emmanouilidis
As far as I know the boundaries feature is not provided from the Google Map API v3 yet.
据我所知，Google Map API v3 尚未提供边界功能。
You need to know the boundaries in order to shape a polygon. The information which is returned by the Geocoder given the address in not enough to shape the boundaries. You may see the returned info here.
您需要知道边界才能塑造多边形。给定地址的地理编码器返回的信息不足以塑造边界。您可以在此处看到返回的信息。
The Stockholm boundaries are: '17.73966,59.66395|17.75651,59.61827|17.81771,59.58645|17.84347,59.53069|17.78465,59.49340|17.78277,59.38916|17.83277,59.36500|17.93215,59.33652|18.00736,59.34496|18.09139,59.33444|18.05722,59.39139|18.12000,59.45388|18.19508,59.45012|18.16562,59.41083|18.32826,59.39795|18.28659,59.41228|18.25945,59.44638|18.31722,59.47361|18.37333,59.46694|18.66638,59.59138|18.69979,59.64409|18.74555,59.68916|18.84139,59.71249|18.98569,59.71666|19.03222,59.71999|19.07965,59.76743|18.93472,59.78361|18.86472,59.79804|18.96922,59.86561|19.06545,59.83250|19.07056,59.88972|19.00722,59.91277|18.92972,59.92472|18.89000,59.95805|18.81722,60.07548|18.77666,60.11084|18.71139,60.12806|18.63277,60.14500|18.50743,60.15265|18.44805,59.99249|18.37334,59.86500|18.29055,59.83527|18.15472,59.79556|18.08111,59.74014|17.96055,59.70472|17.89694,59.68916|17.73966,59.66395'
斯德哥尔摩边界是： '17.73966,59.66395|17.75651,59.61827|17.81771,59.58645|17.84347,59.53069|17.78465,59.49340|17.78277,59.38916|17.83277,59.36500|17.93215,59.33652|18.00736,59.34496|18.09139,59.33444|18.05722,59.39139|18.12000,59.45388|18.19508,59.45012|18.16562,59.41083|18.32826,59.39795|18.28659,59.41228|18.25945,59.44638|18.31722,59.47361|18.37333,59.46694|18.66638,59.59138|18.69979,59.64409|18.74555,59.68916|18.84139,59.71249|18.98569,59.71666|19.03222,59.71999|19.07965,59.76743|18.93472,59.78361|18.86472,59.79804|18.96922,59.86561|19.06545,59.83250|19.07056,59.88972|19.00722,59.91277|18.92972,59.92472|18.89000,59.95805|18.81722,60.07548|18.77666,60.11084|18.71139,60.12806|18.63277,60.14500|18.50743,60.15265|18.44805,59.99249|18.37334,59.86500|18.29055,59.83527|18.15472,59.79556|18.08111,59.74014|17.96055,59.70472|17.89694,59.68916|17.73966,59.66395'
In conclusion the hard part is to find the boundaries for the cities you want to get drawn on your map. I'm not sure whether there is a free service which provides these boundaries. Check this Stackoverflow questionto get more information about sites which provide boundaries.
总之，困难的部分是找到您想要在地图上绘制的城市的边界。我不确定是否有提供这些边界的免费服务。检查此Stackoverflow 问题以获取有关提供边界的站点的更多信息。
In the below example when you click the Draw Stockholm button then the Stockholm is drawn on the map.
在下面的示例中，当您单击绘制斯德哥尔摩按钮时，斯德哥尔摩将绘制在地图上。
<html>
<head>
<head>
<title>Area calculator - Outline a property on a google map and find its area</title>
<title>Google Maps</title>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en">
</script>
<script type="text/javascript">
var map,
geocoder,
addressMarker,
mapCenter = new google.maps.LatLng(59.3426606750, 18.0736160278);
function initialize() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 7,
center: mapCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
geocoder = new google.maps.Geocoder();
}
function showAddress() {
var address = $('#to').val();
geocoder.geocode({
'address': address
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
function drawPolygon() {
// stockholm boundaries
var boundaries = '17.73966,59.66395|17.75651,59.61827|17.81771,59.58645|17.84347,59.53069|17.78465,59.49340|17.78277,59.38916|17.83277,59.36500|17.93215,59.33652|18.00736,59.34496|18.09139,59.33444|18.05722,59.39139|18.12000,59.45388|18.19508,59.45012|18.16562,59.41083|18.32826,59.39795|18.28659,59.41228|18.25945,59.44638|18.31722,59.47361|18.37333,59.46694|18.66638,59.59138|18.69979,59.64409|18.74555,59.68916|18.84139,59.71249|18.98569,59.71666|19.03222,59.71999|19.07965,59.76743|18.93472,59.78361|18.86472,59.79804|18.96922,59.86561|19.06545,59.83250|19.07056,59.88972|19.00722,59.91277|18.92972,59.92472|18.89000,59.95805|18.81722,60.07548|18.77666,60.11084|18.71139,60.12806|18.63277,60.14500|18.50743,60.15265|18.44805,59.99249|18.37334,59.86500|18.29055,59.83527|18.15472,59.79556|18.08111,59.74014|17.96055,59.70472|17.89694,59.68916|17.73966,59.66395';
var latLngArray = boundaries.split('|');
var points = [];
for (var i = 0; i < latLngArray.length; i++) {
pos = latLngArray[i].split(',');
points.push(new google.maps.LatLng(parseFloat(pos[1]), parseFloat(pos[0])));
}
var shape = new google.maps.Polygon({
paths: points,
strokeColor: '#ff0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#ff0000',
fillOpacity: 0.35
});
shape.setMap(map);
}
$(document).ready(function () {
initialize();
});
$(document).on('click', '.show-address', function (e) {
e.preventDefault();
showAddress();
});
$(document).on('click', '.draw-address', function (e) {
e.preventDefault();
drawPolygon();
});
</script>
</head>
<body>
<div id="basic-map">
<div id="map_canvas" style="height:150px;"></div>
<label for="to">Address</label>
<input type="text" id="to" value="Stockholm, Sweden" />
<a href="#" class="show-address">Show Address</a>
<a href="#" class="draw-address">Draw Stockholm</a>
</div>
</body>
</html>I hope this helps.
我希望这有帮助。
