
前提・実現したいこと
位置情報取得ボタンを押下後に、JavaScriptのgetCurrentPositionメソッドを使って緯度・経度を取得し逆ジオコーディングで住所に変換。
Ajaxを使ってPHP(サーバー)にデータを受け渡したい。
現状、位置情報取得ボタンを押下するとフォームに緯度、経度、住所の情報が表示されるが、PHP側へのデータ受け渡しは出来てない。コンソールを確認すると下記のエラーメッセージが表示される。
分かる方がいればご教示のほどよろしくお願いいたします。
該当のソースコード
HTML
<div class="wrap page"> <form action="" name="mainForm" method="post" style="float: left"> <!-- ページ名(全ページ共通) --> <div class="ttl clearfix inner" id="text-button"> <!-- ページ名 --> <button type="button" name="btnTest" id="get-gps">位置情報取得ボタン</button> <textarea id="lat" name="lat"></textarea> <textarea id="lon" name="lon"></textarea> <textarea id="address" name="address"></textarea> </div> <!-- main --> </form> </div><!-- .wrap end -->
JavaScript
var GSI = {}; const latEle = document.querySelector('#lat'); // constの中身<textarea id="lat" name="lat"></textarea> const lonEle = document.querySelector('#lon'); const addressEle = document.querySelector('#address'); const gpsButton = document.querySelector('#get-gps'); const setGeoLoc = (coords) => { latEle.textContent = `緯度: ${coords.latitude}`; lonEle.textContent = `経度: ${coords.longitude}`; } /** * 緯度経度から住所を取得して表示 */ const getAddress = async (coords) => { // 逆ジオコーディング API const url = new URL('https://mreversegeocoder.gsi.go.jp/reverse-geocoder/LonLatToAddress'); url.searchParams.set('lat', coords.latitude); url.searchParams.set('lon', coords.longitude); const res = await fetch(url.toString()); const json = await res.json(); const data = json.results; // 変換表から都道府県などを取得 const muniData = GSI.MUNI_ARRAY[json.results.muniCd]; // 都道府県コード,都道府県名,市区町村コード,市区町村名 に分割 const [prefCode, pref, muniCode, city] = muniData.split(','); // 画面に反映 addressEle.textContent = `${pref} ${city} ${data.lv01Nm}`; }; /** * 位置情報 API の実行(イベントリスナ) */ gpsButton.addEventListener('click', () => { navigator.geolocation.getCurrentPosition( geoLoc => { setGeoLoc(geoLoc.coords); getAddress(geoLoc.coords); }, err => console.error({err}), ); }); var btn = document.getElementById('get-gps'); btn.addEventListener('click', function() { $.ajax({ type: "post", url: "/routine/admin/attendance.php", data: { 'データ': addressEle }, }); //submit()でフォームの内容を送信 document.mainForm.submit(); })
エラーメッセージ1
jquery.min.js:5 Uncaught RangeError: Maximum call stack size exceeded at o (jquery.min.js:5:7810) at gn (jquery.min.js:5:8293) at gn (jquery.min.js:5:8316) at gn (jquery.min.js:5:8316) at gn (jquery.min.js:5:8316) at gn (jquery.min.js:5:8316) at gn (jquery.min.js:5:8316) at gn (jquery.min.js:5:8316) at gn (jquery.min.js:5:8316) at gn (jquery.min.js:5:8316)
エラーメッセージ2
(index):121 GET https://mreversegeocoder.gsi.go.jp/reverse-geocoder/LonLatToAddress?lat=35.6488574&lon=139.7422206 net::ERR_INTERNET_DISCONNECTED
エラーメッセージ3
(index):121 Unncaught (in promise) TypeError: Failed to fetch at getAddress ((index):121:23) at navigator.geolocation.getCurrentPosition.console.error.err.err ((index):141:11)

まだ回答がついていません
会員登録して回答してみよう