🙄

MST作成日誌:localhost環境でGeolocationがパーミッションエラーになった話

2024/01/03に公開

事象

Chromeでlocalhostにアクセスした際、Geolocationがパーミッションエラーを起こしてしまい。緯度経度の取得が出来なかった
位置情報取得許可のダイアログすら表示されない状況

解決方法

Chromeの設定からURL毎に位置情報の設定が出来たので、こちらを常に許可にすることで解決
【手順】

  1. パソコンで Chrome を開きます。
  2. 右上のその他アイコン その他 次に [設定] をクリックします。
  3. [プライバシーとセキュリティ] 次に [サイトの設定] をクリックします。
  4. [最近のアクティビティ]の一覧からlocalhostのURLをクリック
  5. 位置情報のプルダウンがあるので[許可する]または[確認(デフォルト)]を選択

事象発生から解決までの道のり

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