質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

受付中

逆ジオコーディングで住所を取得しPHP側へ受け渡したい

ken100111
ken100111

総合スコア0

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0回答

-1評価

0クリップ

216閲覧

投稿2022/01/18 05:13

前提・実現したいこと

位置情報取得ボタンを押下後に、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)

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

退会済みユーザー

退会済みユーザー

2022/01/18 10:36

利用規約とか改めて確認なさってはいかがでしょうか。短時間に大量のリクエストを送っていませんか?

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。