Q&A
コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564
コード ```### 前提・実現したいこと phpとjavascriptを用いて現在の位置情報を「geolocationapi」から取得し dbに登録した座標（緯度経度）を用いて距離を算出し一番近いものを表示するというプログラムを作成しています ### 発生している問題・エラーメッセージ 現在地の取得->javascript 座標から距離を算出する->javascript mysqlとの接続->php で書いています。 mysqlから取得した配列をjsの変数として使えるようにすることができない
エラーメッセージ
### 該当のソースコード ```php <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>距離計算</title> <style></style> </head> <body> <?php //MySQLのデータベースサーバへ接続（サーバ名，接続ユーザ名，パスワード，データベース名 の順に指定） $link=mysqli_connect("localhost","root","","coordinate"); //SQL文を指定 $query="SELECT * FROM location"; //PHPからSQL文を実行（接続名 $link に対して $query のSQL文を実行） //結果は$resultに格納される $result=mysqli_query($link,$query); //$result から1行取り出して，1項目ごとに配列 $row (フィールド名をキーとした連想配列)に格納 $row=mysqli_fetch_assoc($result); //このrow配列をjs側に渡したい //$row 配列の中身を表示 echo "場所：".$row['place']."<br>"; echo "緯度：".$row['latitude']."<br>"; echo "経度：".$row['longitude']."<br>"; $json_row = json_encode($row) ?> <script> //ユーザーの現在の位置情報を取得 navigator.geolocation.getCurrentPosition(successCallback, errorCallback); // ユーザーの現在の位置情報を取得 function successCallback(position) { const latitude1 = position.coords.latitude const longitude1 = position.coords.longitude let coord = <?php echo $json_row;?> const latitude2 = coord[1]; const longitude2 = coord[2]; //const latitude2 = 35.4349408 //const longitude2 = 139.339615 const latitude3 = 35.480947 const longitude3 = 139.321024 var gl_text = "緯度：" + latitude1 + "<br>"; gl_text += "経度：" + longitude1 + "<br>"; const dis1 = distance(latitude1,longitude1,latitude2,longitude2) const dis2 = distance(latitude1,longitude1,latitude3,longitude3) gl_text += "駅までの距離 :" +dis1+"<br>" gl_text += "運動公園までの距離 :" +dis2+"<br><br>" if (compare(dis1,dis2)==1){ gl_text += "運動公園のほうが近いです<br>" } else { gl_text += "駅のほうが近いです<br>" } document.getElementById("show_result").innerHTML = gl_text; } function compare (dis1,dis2){ if ((dis1-dis2)>0){ return 1 } else return 2 } //2点間の距離計算 function distance(lat1,lng1,lat2,lng2){ const R = Math.PI / 180 lat1*=R; lng1*=R; lat2*=R; lng2*=R; return 6371 * Math.acos(Math.cos(lat1) * Math.cos(lat2) * Math.cos(lng2 - lng1) + Math.sin(lat1) * Math.sin(lat2)); } // 位置情報が取得できない場合 function errorCallback(error) { var err_msg = ""; switch(error.code) { case 1: err_msg = "位置情報の利用が許可されていません"; break; case 2: err_msg = "デバイスの位置が判定できません"; break; case 3: err_msg = "タイムアウトしました"; break; } document.getElementById("show_result").innerHTML = err_msg; } </script> <p>あなたの現在位置</p> <div id="show_result"></div> </body> </html>
試したこと
json_encode
補足情報（FW/ツールのバージョンなど）
xampp contorol panel v3.2.4
ここにより詳細な情報を記載してください。
###ブラウザのページのソース表示結果
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>距離計算</title> <style></style> </head> <body> 場所：honnatugi-staton<br>緯度：35.4349408<br>経度：139.339615<br> <script> //ユーザーの現在の位置情報を取得 navigator.geolocation.getCurrentPosition(successCallback, errorCallback); // ユーザーの現在の位置情報を取得 function successCallback(position) { const latitude1 = position.coords.latitude const longitude1 = position.coords.longitude let coord = <br /> <b>Notice</b>: Undefined variable: json_row in <b>C:\xampp\htdocs\セミナー\showtable.php</b> on line <b>38</b><br /> console.log(coord["latitude"]); console.log(coord["longitude"]); //const latitude2 = 35.4349408 //const longitude2 = 139.339615 const latitude3 = 35.480947 const longitude3 = 139.321024 var gl_text = "緯度：" + latitude1 + "<br>"; gl_text += "経度：" + longitude1 + "<br>"; const dis1 = distance(latitude1,longitude1,coord["latitude"],coord["longitude"]) const dis2 = distance(latitude1,longitude1,latitude3,longitude3) gl_text += "駅までの距離 :" +dis1+"<br>" gl_text += "運動公園までの距離 :" +dis2+"<br><br>" if (compare(dis1,dis2)==1){ gl_text += "運動公園のほうが近いです<br>" } else { gl_text += "駅のほうが近いです<br>" } document.getElementById("show_result").innerHTML = gl_text; } function compare (dis1,dis2){ if ((dis1-dis2)>0){ return 1 } else return 2 } //2点間の距離計算 function distance(lat1,lng1,lat2,lng2){ const R = Math.PI / 180 lat1*=R; lng1*=R; lat2*=R; lng2*=R; return 6371 * Math.acos(Math.cos(lat1) * Math.cos(lat2) * Math.cos(lng2 - lng1) + Math.sin(lat1) * Math.sin(lat2)); } // 位置情報が取得できない場合 function errorCallback(error) { var err_msg = ""; switch(error.code) { case 1: err_msg = "位置情報の利用が許可されていません"; break; case 2: err_msg = "デバイスの位置が判定できません"; break; case 3: err_msg = "タイムアウトしました"; break; } document.getElementById("show_result").innerHTML = err_msg; } </script> <p>あなたの現在位置</p> <div id="show_result"></div> </body> </html>
coord の内容は確認されたのでしょうか。
console.logなど。
でなくてもブラウザの「ソースを表示」から確認できそうに思いますが。
jsで受け取るための
let coord = <?php echo $json_row;?>
を記載すると、show_resultで行っている表示ができなくなります
ブラウザの「ソースを表示」から生成された文字列を確認してください。
ソースの表示から確認できませんでした
何をどう確認してどうなってたのでしょうか。
ブラウザのページのソースを表示をしましたが生成された文字列の項目が見つかりませんでした
回答2件
0
たぶんJavaScript側の参照の仕方が間違ってます。
php
1<?php 2$row["place"] = "aaaa"; 3$row["latitude"] = "123"; 4$json_row = json_encode($row) 5?> 6let coord = <?php echo $json_row;?> 7/*** 8let coord = {"place":"aaaa","latitude":"123"} 9***/
となるので、
js
1let coord = {"place":"aaaa","latitude":"123"} 2console.log(coord[0]); //undefined 3console.log(coord["place"]); //"aaaa" 4console.log(coord.place); //"aaaa" 5
投稿2021/11/24 20:12
総合スコア80850
これではjavascript側でcoordを宣言していることにはならないのでしょうか
質問の意図や背景がわかりかねます。
phpでmysqlから値を取得したものを
javascriptで受け取り計算し、ブラウザに表示するというものを作っています
現在phpで宣言している$rowには値が入っているので
javascriptで$rowを受け取りたいと考えています
PHPの仕事は画面への出力までで、
それがHTMLやJavaScriptとして正しく認識できる内容になっていれば問題ありません。
もちろん、「PHPの出力ができる」ことが条件なのでPHPが動作する状況（.phpであること、とか）である必要はあります。
ひとまず、ブラウザの「ソースを表示」の結果も追記してもらえますか？
追加させていただきました
同じファイルに全てのコードがありますか？
あと、ここに全角スペースが沢山入ってますが、これは？
→ $json_row = json_encode($row)
Syntax errorになりそうですけどね。
calc.phpというファイルにすべて書いています
全角スペースは修正しました。
>全角スペースは修正しました。
提示のコードはそのままのようですが（あと、PHPのコードとブラウザに出て居るソースが整合性取れてません）。
いずれにしても変数未定義のNoticeが出てるので、起きてる現象と対応は明白です。
let coord = <?php echo $json_row;?>
↑この時点で$json_rowという変数が見えてないということです。
phpのrow配列をjavascriptに渡せていないという解釈であってますか？
0
let coord = <?php echo $json_row;?>
のPHPタグをクォーテーションで囲っていないからでは？
投稿2021/11/24 14:24
総合スコア310
正しく配列が作られているなら
{"place":"","latitude":""}
のようになるので囲うと別のエラーになると思います。
文字列ではなく配列でしたね。失礼しました。
あなたの回答
tips
プレビュー
