まず、Geolocation APIを使用するために、以下のコードをHTMLファイルの
セクションに追加します:<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
alert("Geolocation is not supported by this browser.");
}
}
function showPosition(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var accuracy = position.coords.accuracy;
// 位置情報の利用例
console.log("緯度: " + latitude);
console.log("経度: " + longitude);
console.log("精度: " + accuracy + " メートル");
}
</script>
上記のコードでは、navigator.geolocation
オブジェクトのgetCurrentPosition()
メソッドを使用して、現在の位置情報を取得しています。ブラウザが位置情報をサポートしていない場合は、エラーメッセージが表示されます。
次に、以下のコードを任意の場所に追加することで、位置情報の取得をトリガーします:
<button onclick="getLocation()">位置情報を取得する</button>
上記のコードでは、ボタンをクリックすることでgetLocation()
関数が呼び出され、位置情報の取得が開始されます。
取得した位置情報は、showPosition()
関数内で利用することができます。上記の例では、取得した緯度、経度、および精度をコンソールに表示していますが、これらの値を任意の方法で利用することができます。