🙄
MST作成日誌:localhost環境でGeolocationがパーミッションエラーになった話
事象
Chromeでlocalhostにアクセスした際、Geolocationがパーミッションエラーを起こしてしまい。緯度経度の取得が出来なかった
位置情報取得許可のダイアログすら表示されない状況
解決方法
Chromeの設定からURL毎に位置情報の設定が出来たので、こちらを常に許可にすることで解決
【手順】
- パソコンで Chrome を開きます。
- 右上のその他アイコン その他 次に [設定] をクリックします。
- [プライバシーとセキュリティ] 次に [サイトの設定] をクリックします。
- [最近のアクティビティ]の一覧からlocalhostのURLをクリック
- 位置情報のプルダウンがあるので[許可する]または[確認(デフォルト)]を選択
事象発生から解決までの道のり
navigator.geolocation.getCurrentPosition((position)=> {
//緯度
let lat = position.coords.latitude;
//経度
let lng = position.coords.longitude;
});
これを実行するとパーミッションエラーが発生し、緯度経度の情報が取得できなかった
Geolocationのパーミッションの状態を把握するために Permissions API を活用して状況を把握
参考サイト:
Permissions APIでブラウザからの各種機能へのアクセス権限を確認・要求する
以下を実行すると「許可されていません」と出たのでやはりパーミッション設定だと確信
navigator.permissions.query({name:'geolocation'})
.then((result) => {
if(result.state == 'granted') {
console.log('使用できます。')
} else if(result.state == 'prompt') {
console.log('確認が必要です。')
} else if (result.state == 'denied') {
console.log('許可されていません。')
}
});
色々調べた結果 Chromeのブラウザ設定から簡単に変更出来たので無事に解決
Discussion