Bingmapsで移動ルートを記録、描画 #1
Bingmapsで移動ルートを記録、描画 #1:
最近やたらBingMapsを多用したので折角なのでまとめてみます。
以下成果物を作成する過程を４回に分けて共有します。
Geolocation APIとBingmaps APIを組み合わせて、自分が走ったルートを記録し、地図に描画するプログラム
1.GeoLocation APIで現在地の座標を取得、現在地の地図を描画←今回はこちら
2.Bingmaps APIのDirection Moduleを使ってルート検索機能を実装
3.GeoLocation APIを使用し、移動ルートを記録
4.記録したルートをBingmapsAPIに渡し、地図上に描画
第一段階としてGeolocation APIへリクエストし、自身の現在地座標を取得後、Bingmaps APIへ座標情報を元に現在地の地図を描画してもらいます。
上記Key#についてはBingmapsアカウントを作成し取得してください。
こちらの記事で紹介されている手順で取得出来ます↓
https://qiita.com/ShingoOikawa/items/4ffb4bec13b352d0ff90
geolocation APIの getCurrentPositionメソッドの成功時に実行される関数mapsInitにてBingmaps APIへ描画する地図の中心座標（現在地）を渡し描画してもらいます。
その際にBingmapsのPushpinメソッドにて中心地(現在地)にピンを表示してもらっています。
次回はBingmaps APIで準備されているDirection Moduleを使い、この地図にルート検索の機能を追加します。
最近やたらBingMapsを多用したので折角なのでまとめてみます。
以下成果物を作成する過程を４回に分けて共有します。
成果物
Geolocation APIとBingmaps APIを組み合わせて、自分が走ったルートを記録し、地図に描画するプログラム
実装の流れ
1.GeoLocation APIで現在地の座標を取得、現在地の地図を描画←今回はこちら2.Bingmaps APIのDirection Moduleを使ってルート検索機能を実装
3.GeoLocation APIを使用し、移動ルートを記録
4.記録したルートをBingmapsAPIに渡し、地図上に描画
手順１：現在地座標の取得と地図を描画
第一段階としてGeolocation APIへリクエストし、自身の現在地座標を取得後、Bingmaps APIへ座標情報を元に現在地の地図を描画してもらいます。sample.html
<body>
<h1>BingMaps TEST</h1>
<div id="myMap"></div>
</body>
//------bingmaps起動--------------
<script src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=[自身のKey#]' async defer></script>
<script src='sample.js'></script>
こちらの記事で紹介されている手順で取得出来ます↓
https://qiita.com/ShingoOikawa/items/4ffb4bec13b352d0ff90
sample.js
//---------現在位置が取得成功時に実行する関数--------
let map;
function mapsInit(position) {
const lat = position.coords.latitude;
const lon = position.coords.longitude;
map = new Microsoft.Maps.Map('#myMap', {
center: new Microsoft.Maps.Location(lat, lon),
mapTypeId: Microsoft.Maps.MapTypeId.load,
zoom: 15
});
pushpin(lat,lon,map);
}
//-----現在地にピンを描画--------------
function pushpin(la,lo,now){
let location = new Microsoft.Maps.Location(la,lo)
let pin = new Microsoft.Maps.Pushpin(location, {
color: 'red',
draggable:false,
enableClickedStyle:true,
enableHoverStyle:true,
visible:true
});
now.entities.push(pin);
};
//---------現在位置が取得失敗時に実行する関数--------
function mapsError(error) {
let e = "";
if (error.code == 1) {
e = "位置情報が許可されてません";
}
if (error.code == 2) {
e = "現在位置を特定できません";
}
if (error.code == 3) {
e = "位置情報を取得する前にタイムアウトになりました";
}
alert("エラー：" + e);
};
//-----------------現在地取得と地図描画-----------
function GetMap() {
navigator.geolocation.getCurrentPosition(mapsInit, mapsError);
}
その際にBingmapsのPushpinメソッドにて中心地(現在地)にピンを表示してもらっています。
次回はBingmaps APIで準備されているDirection Moduleを使い、この地図にルート検索の機能を追加します。
コメント
コメントを投稿