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

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

ただいまの
回答率

87.36%

phpの配列をjavascriptの変数として使いたい

受付中

回答 2

投稿 編集

flag 質問者が2日前に「まだ回答を求めています」と言っています。

  • 評価
  • クリップ 1
  • VIEW 184

score 0

コード

 前提・実現したいこと

phpとjavascriptを用いて現在の位置情報を「geolocationapi」から取得し
dbに登録した座標(緯度経度)を用いて距離を算出し一番近いものを表示するというプログラムを作成しています

発生している問題・エラーメッセージ

現在地の取得->javascript
座標から距離を算出する->javascript
mysqlとの接続->php

で書いています。
mysqlから取得した配列をjsの変数として使えるようにすることができない

エラーメッセージ

該当のソースコード

<!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>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

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

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

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

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

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

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

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

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • hahaha44444

    2021/11/25 16:04

    ソースの表示から確認できませんでした

    キャンセル

  • m.ts10806

    2021/11/25 17:09

    何をどう確認してどうなってたのでしょうか。

    キャンセル

  • hahaha44444

    2021/11/25 19:56

    ブラウザのページのソースを表示をしましたが生成された文字列の項目が見つかりませんでした

    キャンセル

回答 2

+2

たぶんJavaScript側の参照の仕方が間違ってます。

<?php
$row["place"] = "aaaa";
$row["latitude"] = "123";
$json_row = json_encode($row)
?>
let   coord = <?php echo $json_row;?>
/***
let   coord = {"place":"aaaa","latitude":"123"}
***/


となるので、

let   coord = {"place":"aaaa","latitude":"123"}
console.log(coord[0]); //undefined
console.log(coord["place"]); //"aaaa"
console.log(coord.place); //"aaaa"

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2021/11/25 21:13

    calc.phpというファイルにすべて書いています

    全角スペースは修正しました。

    キャンセル

  • 2021/11/26 05:10

    >全角スペースは修正しました。

    提示のコードはそのままのようですが(あと、PHPのコードとブラウザに出て居るソースが整合性取れてません)。

    いずれにしても変数未定義のNoticeが出てるので、起きてる現象と対応は明白です。
    let coord = <?php echo $json_row;?>
    ↑この時点で$json_rowという変数が見えてないということです。

    キャンセル

  • 2021/11/30 20:51 編集

    phpのrow配列をjavascriptに渡せていないという解釈であってますか?

    キャンセル

0

let coord = <?php echo $json_row;?>

のPHPタグをクォーテーションで囲っていないからでは?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2021/11/25 05:08

    正しく配列が作られているなら
    {"place":"","latitude":""}
    のようになるので囲うと別のエラーになると思います。

    キャンセル

  • 2021/11/25 14:57

    文字列ではなく配列でしたね。失礼しました。

    キャンセル

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

  • ただいまの回答率 87.36%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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