BingMaps：住所から緯度経度を取得（GeoCode）
【GeoCode】
ここでのGeoCodeの解説はBingMapsのコードを解説するための文章です。
Geocodeingとは住所から緯度経度を取得する方法です。
ReverseGeocodeingは逆の緯度経度から住所を割り出す方法です。
今回はGeocodeingのサンプルコードを紹介します。
【今回のサンプルの動作】
テキストボックス**「住所」検索**できるようにしています。
結果、h1要素にJSONで表示するようにしています。
【HTMLとJavascript２つに分割して紹介】
HTML
geocode.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>BingMaps GO! : Geocode Example</title>
<style>html,body,#main{height:100%;}body{padding:0;margin:0;background:#333;}h1{padding:0;margin:0;font-size:100%;color:white;}p{margin:0}</style>
</head>
<body>
<!-- MAP[START] -->
<header>
<h1 id="h1">BingMaps GO! (住所検索 → 緯度経度取得）</h1>
<p><input type="text" id="from" value="Seattle"> <button id="get">検索</button></p>
</header>
<div id="main">
<div id="myMap" style='width:100%;height:90%;'></div>
</div>
<!-- MAP[END] -->
JavaScript
・BingMapsControllerを読み込んでいる、最初の外部ファイル読み込みの
[*** Your Map Key ***]の箇所を、自身が取得したBingMapsKeyと変えてください。
geocode.html
<script src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=[*** Your Map Key ***]' async defer></script>
<script>
/**
* BingMapsControllerを読み込んだらGetMap()を実行
* @constructor
*/
let map; //MapObject用
let searchManager; //SearchObject用
function GetMap() {
//Map生成
map = new Microsoft.Maps.Map('#myMap', {
zoom: 15,
mapTypeId: Microsoft.Maps.MapTypeId.aerial
});
//検索モジュール指定
Microsoft.Maps.loadModule('Microsoft.Maps.Search', function () {
//searchManagerインスタンス化（Geocode,ReverseGeocodeが使用可能になる）
searchManager = new Microsoft.Maps.Search.SearchManager(map);
//Geocode：住所から検索
geocodeQuery(document.getElementById("from").value);
});
}
/**
* 検索ボタン[Click:Event]
*/
document.getElementById("get").onclick = function(){
//4.Geocode:住所から検索
geocodeQuery(document.getElementById("from").value);
};
/**
* 住所から緯度経度を取得
* @param query [住所文字列]
*/
function geocodeQuery(query) {
if(searchManager) {
//住所から緯度経度を検索
searchManager.geocode({
where: query, //検索文字列
callback: function (r) { //検索結果を"( r )" の変数で取得
//最初の検索取得結果をMAPに表示
if (r && r.results && r.results.length > 0) {
//Pushpinを立てる
const pin = new Microsoft.Maps.Pushpin(r.results[0].location);
map.entities.push(pin);
//map表示位置を再設定
map.setView({ bounds: r.results[0].bestView});
//取得た緯度経度をh1要素にJSON文字列にして表示
console.log(r.results[0].location);
document.getElementById("h1").innerText = JSON.stringify(r.results[0].location);
}
},
errorCallback: function (e) {
alert("見つかりません");
}
});
}
}
</script>
</body>
</html>
【緯度経度の取得方法】
・ **「//取得た緯度経度をh1要素にJSON文字列にして表示」コメント箇所の以下2行がGeoCodeでの結果である『緯度経度』を取得＆表示している箇所です。
・「 r.results[0].location 」**をconsole.logで確認することでデータ取得の内容を確認しています。
【サンプルコード】
『 BingMaps Go! ( https://mapapi.org ) 』
のGeocodeカテゴリの『 Geocode（ 住所 → 緯度経度 ） 』をご確認ください！
実際の動作を確認することができます。※コードもまるっとあります。
こちらを見てもらうと早いかも。
あれば良いサンプルは随時追加していきます。
※海外からのアクセスと日本では表示しているものが違います。
今後
今後は上記のようなサンプルコードを増やしていきます。
BingMaps GO! を宜しくお願いいたします。(^^)