スマホで取得した位置情報（JavaScriptの変数）をPHPに渡したい

前提・実現したいこと

スマホで撮影した画像と位置情報をセットにしてDB登録するサイトを作ろうとしています。全体的にはMySQL/PHP/JavaScriptで、位置情報はJavaScriptで取得します。
取得した緯度/経度の数値をPHPに渡してDB登録など処理したいのですが「渡し」が意図通りにできず、前に進めなくて悩んでいます。

###質問の内容
位置情報を取得するところはWEBで見つけたものをそのまま使ってます（コメントは自分なりの推測で書いたものも混じっています。コードの意味と違うことが書いてあるかもしれません）。
PHPへの引き渡しは、これまたWEBで見つけたものを加工しているのですが、JavaScriptで作った変数var latをajaxではdata: {"item1":lat }としてPHPに渡そうとしているところがうまくいかず、ajax側での記述の仕方に間違いがありそうと睨んでいます。

下記コードやエラーメッセージから修正すべきところが分かりそうでしたら、アドバイスいただけると幸いです。

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

ページを読み込んで値の渡しがsuccessしたらalartが開くはずですが、なにも表示されません（真っ白なページ）。ブラウザのデベロッパーツールではConsoleに下記メッセージが表示されています。

Uncaught ReferenceError: lat is not defined

該当のソースコード

JavaScript
1<!DOCTYPE html>
2<html>
3    <head>
4        <!--AJAXの宣言-->
5        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6        <!--位置情報取得の宣言-->
7        <meta name="viewport" content="initial-scale=1.0" />
8        <!--JQUERYの読み込み-->
9        <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
10
11        <!--ここから位置情報取得用のJavaScript-->
12        <script>
13        if (navigator.geolocation) {	// Geolocation APIが使用可能か
14            // 現在位置を取得する
15            navigator.geolocation.getCurrentPosition(
16                // 現在位置の取得に成功したら、locationという名前で情報を扱う。
17            	function(position){
18                    var location = position.coords;
19                    // locationの中のlatitudeをlatとして扱う。nullの場合は"-"とする。
20                    var lat = location.latitude || "-";		// 緯度(-180〜180)
21                    // locationの中のlongitudeをlngとして扱う。nullの場合は"-"とする。
22                    var lng = location.longitude || "-";	// 経度(-90〜90)
23                },
24                // 以下、現在位置の取得に失敗した場合の処理など省略
25
26
27        <!--latの値をPHPへ渡す-->
28        $.ajax({
29            type: "POST",
30            url: "send.php",
31            data: {"item1":lat },
32                success: function(html){
33                    alert(html);
34                }
35            })
36       <!--lngの値をPHPへ渡す-->
37        $.ajax({
38            type: "POST",
39            url: "send.php",
40            data: {"item2":lng },
41                success: function(html){
42                    alert(html);
43                }
44            });
45
46</script>
47</head>
48<body>
49

行動規範の内容に同意します

回答1件

ベストアンサー

スコープの問題です。
functionの中で定義されているのでその中でしか活きません。

js
1               function(position){
2                    var location = position.coords;
3                    // locationの中のlatitudeをlatとして扱う。nullの場合は"-"とする。
4                    var lat = location.latitude || "-";        // 緯度(-180〜180)
5                    // locationの中のlongitudeをlngとして扱う。nullの場合は"-"とする。
6                    var lng = location.longitude || "-";    // 経度(-90〜90)
7                },

ひとまず下記3つの定義をグローバルスコープに移してください。

var location
var lat
var lng

varが定義の意味を持つのでグローバルスコープに移したらfunction内の変数につけているvarは取ってくださいね。

投稿2018/05/19 13:16

編集2018/05/19 13:20

m.ts10806

総合スコア80888

yoshiomurakami

2018/05/19 13:58

早速のご回答ありがとうございます。まずやってみます。

yoshiomurakami

2018/05/19 14:45

スコープという概念があるのを初めて知りました。まずはご教示いただいたとおりグローバルスコープで定義したのですが、そのままではグローバルスコープで定義した値（hoge）でしかPHPに渡りませんでした。そこでグローバルにせず、ajaxをfunction内に含めてローカルスコープでPHPに値を渡しにいくようにしてみたら、値が渡ったようです。

yoshiomurakami

2018/05/19 14:46

ご教示いただいた意図どおりに受け取れているのか分かりませんが、自分としては解決できたような気がしています。ありがとうございました。