Google Maps 网络应用程序以非常漂亮的方式对区域进行地理编码和勾勒。这可以通过 Google Maps JavaScript API 实现吗？网站示例：
这是瑞典斯科讷县。 Google Maps Web 应用程序用红色勾勒出它的轮廓并用粉红色着色。我想使用 Google Maps JavaScript API 对这样的区域进行地理编码和显示。怎么样？
【问题讨论】：
标签： javascript google-maps google-maps-api-3
据我所知，Google Map API v3 尚未提供边界功能。
您需要知道边界才能塑造多边形。给定地址的地理编码器返回的信息不足以形成边界。您可能会看到返回的信息here。
斯德哥尔摩边界是：'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'
总之，最难的部分是找到您想要在地图上绘制的城市的边界。我不确定是否有提供这些界限的免费服务。检查此Stackoverflow question 以获取有关提供边界的站点的更多信息。
在下面的示例中，当您单击“绘制斯德哥尔摩”按钮时，会在地图上绘制斯德哥尔摩。
<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>我希望这会有所帮助。
【讨论】：