Help us understand the problem. What is going on with this article?

BingMaps:住所から緯度経度を取得(GeoCode)

More than 1 year has passed since last update.

BingMaps:住所から緯度経度を取得(GeoCode)

【GeoCode】

ここでのGeoCodeの解説はBingMapsのコードを解説するための文章です。
Geocodeingとは住所から緯度経度を取得する方法です。
ReverseGeocodeingは逆の緯度経度から住所を割り出す方法です。
今回はGeocodeingのサンプルコードを紹介します。

【今回のサンプルの動作】

テキストボックス「住所」検索できるようにしています。
結果、h1要素にJSONで表示するようにしています。
68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f3130343533302f62333264643839392d616465322d623534302d336266642d6230616562323065393630352e706e67.png

【HTMLとJavascript2つに分割して紹介】

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( 住所 → 緯度経度 ) 』をご確認ください!
実際の動作を確認することができます。※コードもまるっとあります。
こちらを見てもらうと早いかも。
キャプチャ.PNG
あれば良いサンプルは随時追加していきます。
※海外からのアクセスと日本では表示しているものが違います。

今後

今後は上記のようなサンプルコードを増やしていきます。
BingMaps GO! を宜しくお願いいたします。(^^)

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away