BingMapsAPI/実践

API key の準備が完了したら，実際に JavaScript を書いて Map を表示してみよう．

処理の流れ

位置情報の取得と API 処理を組み合わせるため，実行される順番がやや複雑になる．コメントなどで順番がわかるようにしておくと自力で実装する際の助けとなるだろう．

API を使用するためのコード読み込み．
位置情報取得に成功した場合の関数，失敗した場合の関数，オプションを記述．
位置情報の取得（前項での処理と同様）
位置情報が取得できた場合は，id 指定した HTML 要素に現在地を中心としたマップを表示する（位置情報の取得に成功した場合に実行される関数内に記述する）．

コードの読み込み

Microsoft が提供するコードを読み込む．ここに自分の API key を入力しておく．

<!-- geo_and_map.html -->

<script src="https://www.bing.com/api/maps/mapcontrol?mkt=ja-jp&key=API_KEY"></script>

<script>
  // JSの処理
</script>

位置情報取得に成功した場合の関数，失敗した場合の関数，オプションを記述．

この 3 項目自体は前項の位置情報取得で使用したものと同様の記述をすれば OK．

今回はそれぞれ以下のような内容．

位置情報の取得に成功した場合に実行される関数（本項ではmapsInit）．
位置情報の取得に失敗した場合に実行される関数（前項と全く同じ）．
位置情報の取得に必要なオプション（前項と全く同じ）．

その他，マップの情報を格納するための変数（map）を定義しておく（これがないと動かないので注意！）．

必要な関数を準備

// geo_and_map.html

// マップ情報格納用の変数
let map;

// 省略
const option = {...};

// 省略
function showError(error) {...};

// この後マップ表示の処理を書き込む
function mapsInit() {...};

マップ表示処理の追加

マップの表示処理は Microsoft 側で決められているため，ドキュメントに従ってコードを記述すれば OK．

流れとしては下記のとおり．

位置情報から緯度経度を抽出する．
1 で取得した緯度経度を中心にしてマップを表示する．

マップを表示する際には下記の情報が必要となる．

マップを表示したい要素の id 名（#map）．
表示するマップの中心座標（緯度経度，centerのオブジェクト）．
表示するマップの縮尺（1から20で指定）．

// geo_and_map.html

function mapsInit(position) {
  const lat = position.coords.latitude;
  const lng = position.coords.longitude;
  map = new Microsoft.Maps.Map("#map", {
    center: {
      latitude: lat,
      longitude: lng,
    },
    zoom: 15,
  });
}

位置情報取得処理

最後に，実際に位置情報を取得する処理を記述する．

コード自体は前項と同様だが，実行のタイミングに注意する必要がある．理由は以下．

マップ表示のためには Microsoft が提供したコードを読み込む必要がある．
読み込みが完了する前にマップ表示の処理を実行しようとするとエラーになる．
そのため，読み込みが完了した後に「位置情報取得 -> マップ表示」の処理が実行されるように記述しなければならない．

この場合，window.onload = function () {...}を用いることで，全てのスクリプトが読み込ま出てから{}内が実行されるように記述できる．

// geo_and_map.html

window.onload = function () {
  navigator.geolocation.getCurrentPosition(mapsInit, showError, option);
};

💡 Key Point

API（特に外部のコードを読み込む場合）は読み込み -> 実行の順番が重要になる場合が多い．

実行結果

正常に位置情報が取得でき，マップ表示処理が実行されると，以下のようにブラウザ上にマップが表示される．

実行場所やネットワーク環境によって場所は変化するため，実際の場所とあっていなくても気にしなくて OK．

マップ表示結果

練習

下記の処理を実装しよう！

位置情報の取得に成功したときに関数を定義し，map 表示の処理を記述．
位置情報を取得する処理を記述し，画面にマップが表示されることを確認！

G's-Fukuoka-Lab06