今回の記事は要注意です。あなたの居場所を特定します。
C# WindowsFormsの場合
参照の追加で[System.Device.dll]を追加したあと以下のコードで取得できます。
GeoCoordinateWatcherオブジェクトを生成してイベントハンドラを追加し、スタートするだけ。位置情報が変更されたらWatcher_PositionChangedが実行されるので、必要なデータを取り出して表示します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
using System; using System.Windows.Forms; using System.Device.Location; // ここで System.Device.dll が必要 public partial class Form1 : Form { GeoCoordinateWatcher watcher = new GeoCoordinateWatcher(); public Form1() { InitializeComponent(); this.watcher.PositionChanged += Watcher_PositionChanged; } private void button1_Click(object sender, EventArgs e) { this.watcher.Stop(); bool started = this.watcher.TryStart(false, TimeSpan.FromMilliseconds(2000)); if (!started) MessageBox.Show("失敗しました"); } private void Watcher_PositionChanged(object sender, GeoPositionChangedEventArgs<GeoCoordinate> e) { double latitude = watcher.Position.Location.Latitude; // e.Position.Location.Latitudeを調べてもよい double longitude = watcher.Position.Location.Longitude; // 一度取得してしまえばPCの場合変更しないので何度もこのハンドラが呼び出されないように止める this.watcher.Stop(); Invoke((Action)(() => { label1.Text = $"緯度：{latitude} + 経度：{longitude}"; })); } } |
またマップが表示させたい場合はbingMapにアクセスして表示させます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
public partial class Form1 : Form { private void Watcher_PositionChanged(object sender, GeoPositionChangedEventArgs<GeoCoordinate> e) { double latitude = watcher.Position.Location.Latitude; double longitude = watcher.Position.Location.Longitude; this.watcher.Stop(); Invoke((Action)(() => { label1.Text = $"緯度：{latitude} + 経度：{longitude}"; })); // bingMapにアクセスして表示 int zoom = 10; // 大きな値にすると拡大される string url = $"https://www.bing.com/maps/embed?lvl={zoom}&w=600&h=600&cp={latitude}~{longitude}"; System.Diagnostics.Process.Start(url); } } |
JavaScript編
Bing MapsKeyを使う方法と使わない方法があります。
Bing MapsKeyを使う場合は下記URLにアクセスしてKeyを取得します。
http://www.BingMapsportal.com/
Bing MapsKeyを使わない方法
[開始]ボタンをクリックすると「位置情報へのアクセスを許可しますか」と尋ねられます。[許可]を選択すると、端末の位置が変化するたびに自動的に位置情報が表示されます。
実際に実行してみるとPCでも1秒ごとに更新されていることがわかります。[地図へ移動]をクリックするとBingMapのページに移動します。
HTML部分を示します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bing MapsKeyを使わない方法</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> td { border: 1px solid #000; padding: 2px 8px 2px 8px; } </style> </head> <body> <button onclick="StartWatch()">開始</button> <button onclick="ClearWatch()">終了</button> <button onclick="ToMap()">地図へ移動</button> <div id="result"></div> <script src="no-use-key.js"></script> </body> </html> |
JavaScript部分を示します。
最初に[開始]と[終了]がクリックされたときの処理を示します。
no-use-key.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
let num = 0; let watch_id; let $result = document.getElementById('result'); function StartWatch() { navigator.geolocation.clearWatch(watch_id); // 端末の位置が変化するたびに自動的に呼び出される関数を登録する // 5000ms（5秒）待ってもなにも返ってこない場合は失敗とする watch_id = navigator.geolocation.watchPosition(Success, Erorr, {"enableHighAccuracy": true, "timeout": 5000, "maximumAge": 20000}); // 端末の位置が変化したときに呼び出される関数 function Success(position){ num++; let date = new Date(); let table = `<table> <tr><td>緯度</td><td>${position.coords.latitude}</td></tr> <tr><td>経度</td><td>${position.coords.longitude}</td></tr> <tr><td>高度</td><td>${position.coords.altitude}</td></tr> <tr><td>位置精度</td><td>${position.coords.accuracy}</td></tr> <tr><td>高度精度</td><td>${position.coords.altitudeAccuracy}</td></tr> <tr><td>移動方向</td><td>${position.coords.heading}</td></tr> <tr><td>速度</td><td>${position.coords.speed}</td></tr> <tr><td>時刻</td><td>${date.toLocaleString()}</td></tr> <tr><td>回数</td><td>${num}</td></tr> </table>`; $result.innerHTML = table; } // 失敗時に呼び出される関数 function Erorr(e){ $result.innerHTML = 'エラー'; } } // 登録を解除 function ClearWatch() { $result.innerHTML = '終了'; navigator.geolocation.clearWatch(watch_id); } |
次に[地図へ移動]がクリックされたときの処理を示します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
// マップを表示するページに遷移する function ToMap(){ navigator.geolocation.clearWatch(watch_id); watch_id = navigator.geolocation.watchPosition(Success, Erorr, {"enableHighAccuracy": true, "timeout": 5000, "maximumAge": 20000}); // navigator.geolocation.watchPositionが成功したらすぐにマップを表示するページに遷移する function Success(position){ // 他のページへ移動するため現在登録されている関数は解除する // これをしないとブラウザバックしたときすぐにリダイレクトさせられる navigator.geolocation.clearWatch(watch_id); // 変数 url に遷移先のurlを格納する // 幅高さ600ピクセル let zoom = 10; let url = `https://www.bing.com/maps/embed?lvl=${zoom}&w=600&h=600&cp=${position.coords.latitude}~${position.coords.longitude}`; location.href = url; } // 失敗時に呼び出される関数 function Erorr(e){ $result.innerHTML = 'エラー：ToMap関数'; } } |
Bing MapsKeyを使う方法
上記の方法ではマップに現在位置のマークがついていません。これをつけるためにはBingMapsKeyが必要です。
Bing MapsKeyを使う場合は下記URLにアクセスしてKeyを取得します。
http://www.BingMapsportal.com/
この方法だと確認のメッセージは出てきません。
HTML部分を示します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html> <head> <title>Bing MapsKeyを使って位置情報を取得する</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> body{ margin:0; padding:0; overflow:hidden; font-family:'Segoe UI',Helvetica,Arial,Sans-Serif; } #map { width: 100%; max-width: 500px; } </style> </head> <body> <div id='value'></div> <div id='map'></div> <script src="use-key.js"></script> <script src="https://www.bing.com/api/maps/mapcontrol?key=【ここに取得したキーを入れる】&callback=loadMap"></script> </script> </body> </html> |
JavaScript部分を示します。
use-key.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
function loadMap() { let $map = document.getElementById('map'); let $value = document.getElementById('value'); let map = new Microsoft.Maps.Map($map, {}); let center = map.getCenter(); let pushpin = new Microsoft.Maps.Pushpin(center, { color: 'blue' }); map.entities.push(pushpin); // 日本国内のみを前提としている。本当はダメ $value.innerHTML = `北緯 ${GetString(center.latitude)} 東経 ${GetString(center.longitude)}`; } function GetString(value){ var d = Math.floor(value); // 正の度数 var dh = (value-d)*60; // 度の小数点以下を60倍して var f = Math.floor(dh); // 分の整数を出す var fh = (dh-f)*60; // 分の小数点以下を60倍して var b = Math.floor(fh); // 秒の整数を出す var bh = (fh-b)*1000; // 秒の小数点以下を丸める var fraction = Math.floor(bh); var str = d + "度" + f + "分" + b + "秒" + fraction; return str; } |
