BingMaps：住所から緯度経度を取得（GeoCode）

14052 ワード
Web JavaScript map Microsoft bingmaps JavaScript テキストリンク

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! を宜しくお願いいたします。(^^)