Google MapsのWebアプリケーションは、地域のエリアをジオコードし、概要を示します。これはGoogle Maps JavaScript APIで可能ですか？ウェブサイトの例：Google Maps JavaScript APIを使用したアウトラインと陰影の領域
これは、スウェーデンのスコーネの郡です。 Google MapsのWebアプリケーションは、それを赤で示し、ピンク色にします。 Google Maps JavaScript APIを使用して、このような領域をジオコードして表示する必要があります。どうやって？
私の知る限り、境界機能はまだGoogle Map API v3から提供されていません。
ポリゴンを形作るために境界を知る必要があります。 Geocoderによって返される情報で、境界線を形作るにはアドレスが不十分です。返された情報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);
}
});
}
\t \t \t \t function drawPolygon() {
\t \t \t \t
\t \t \t \t // stockholm boundaries
\t \t \t \t \t 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();
});
\t \t \t \t
\t \t \t \t $(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>
\t \t \t \t <a href="#" class="draw-address">Draw Stockholm</a>
</div>
</body>
</html>私はこのことができます願っています。
答えをありがとう。 Maybeeが正しいとすれば、APIから現在の地域出力のためにジオコードされたコードを取得する方法はありません。私のサンプルリンクでは、データが存在し、共有できることがわかっているので、それはうんざりです。都市は簡単で、その情報を検索する人のためにジオコードapiで検索できます。 –
みんな、これに関するどんな更新。 2015年ですが、まだ解決策を探しています。 ありがとうございます – theChinmay