多分書く程のものじゃないのか、意外と書いている人居ないので、投稿。
作ったもの
こんな感じで緯度と経度とスピードを取得できるWebアプリを作りました。
開いた瞬間位置情報取得が始まり、stopボタンを押すと位置情報取得が止まります。
実装
使ったAPI
Geolocation APIというWebページで使えるAPIを使って作成しました。
Webアプリのホスティングについて
Geolocation APIはHTTPSのページでないと使えません。
なので、htmlファイルをローカルに保存して開くだけでは動かないし、httpのサーバーに公開しても動かないので注意しましょう。
httpsでのWebページの配信方法は、お任せしますが、私は簡単なのでCloudflare Pagesを使いました。
位置情報の取得方法
位置情報を取得するメソッドは以下の2種類があります。
速度計は操作不要で速度情報が逐次更新されていく動作が望まれるので、watchPositionメソッドを使用します。
緯度、経度、速度の取得方法
取得できる情報はこのようになっています。
速度の単位がm/sになっているので、時速(km/h)が知りたい場合は変換する必要があります。
精度を上げるために
デフォルトだとあまり精度が良くなかったので、オプションを変更して改善しました。
オプションの詳細については、各位置情報取得メソッドのドキュメントページに書かれているので、確認してみてください。
今回私が使用したオプションは以下の通りです。もしスマホのバッテリーの減りが気になるかたは、ここから変更する必要があると思います。
const options = {
enableHighAccuracy: true, // 位置情報の精度を高める
timeout: 100, // タイムアウトまでの時間（ミリ秒）
maximumAge: 0, // キャッシュされた位置情報の最大年齢
};
全体のコード
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Webアプリ 速度計</title>
</head>
<body>
<button type="button" id="stop">stop</button>
<p id="latitude"></p>
<p id="longitude"></p>
<p id="speed"></p>
<script>
let watchID;
const options = {
enableHighAccuracy: true, // 位置情報の精度を高める
timeout: 100, // タイムアウトまでの時間（ミリ秒）
maximumAge: 0, // キャッシュされた位置情報の最大年齢
};
watchID = navigator.geolocation.watchPosition(
(position) => {
let { latitude, longitude, speed } = position.coords;
speed = (speed * 3600) / 1000;
document.getElementById("latitude").textContent =
"latitude: " + latitude;
document.getElementById("longitude").textContent =
"longitude: " + longitude;
document.getElementById("speed").textContent = "speed: " + speed;
},
null,
options
);
document.getElementById("stop").addEventListener("click", () => {
navigator.geolocation.clearWatch(watchID);
});
</script>
</body>
</html>
宣伝
現在新潟大学学生フォーミュラプロジェクトでは、スポンサーになっていただける企業様や個人を募集しています。
プログラミングから溶接まで多種多様なスキルを持った学生が在籍しています。
下記のメールまでご連絡をお待ちしております。
next-fp@eng.niigata-u.ac.jp