javascriptで座標を取得する関数を作りたい

Question

以下のコードで、位置情報を取得できたらその座標を返し、
取得できなかったらデフォルトの座標を返すという関数を作っています。

しかし、
console.log(getPos());
で確認してみると、undefindになってしまいます。
なぜこのような現象が起こるのでしょうか？
詳しい方がいらっしゃいましたらご教示くださいませ。

// =============
// ▼ 座標取得
// =============
function getPos(){
	if (! navigator.geolocation) {
		// GPSに対応していない
		$('#gmap').before('<p>お使いの端末では座標を取得できません。</p>');
		var GPSlat = 35.680786;
		var GPSlng = 139.766405;
		var GPSlatlng = GPSlat+', '+GPSlng; 
	}else{
		// GPSに対応している
		var GPSlatlng = navigator.geolocation.getCurrentPosition(function(pos) {	// 座標取得
			// 取得成功時の処理
			// var GPSacc = pos.coords.accuracy;
			
			var GPSlatlng = pos.coords.latitude+', '+pos.coords.longitude;
			return GPSlatlng;
		});
	}
	return GPSlatlng;
}
// =============
// ▲ 座標取得
// =============

console.log(getPos());

Answer 1

getCurrentPositionは非同期処理なので、上記コードのように戻り値で結果を受け取ることはできません。
そのためgetPos関数が終了するタイミングでは、GPSlatlngはundefinedとなります。

Promise/Deferred パターンを採用してSuccessコールバックからの結果を待ち合わせてあげる等すれば目的の関数を実現できるかと思います。

Answer 2

getCurrentPosition が何も返さないからだと思うけど、
コールバック関数内で外のスコープの変数を介して値を返せないかな？

Comments

[退会済みユーザー]

すみません。どういうことなのか理解できず。。。
初心者ですみません・・

[退会済みユーザー]

どう書いたら良いでしょう？

Answer 3

調べた所、[[PromiseStatus]]には直接アクセスする方法がないみたいですね。
無理やりですが、getPos().then(function(result){});内で処理を済ませました。ありがとうございました！

Answer 4

以下にPromise/Deferred パターンのサンプルを置いておきます。
※IE10以前だと動かないです

getPos側でresolveに結果を入れてあげれば、thenで処理完了時resultから値を取り出せます。
以下サイトが参考になるかもしれません。
https://www.wareko.jp/blog/post-13612

// =============
// ▼ 座標取得
// =============
function getPos(){
    return new Promise(function(resolve, reject){
        if (! navigator.geolocation) {
            // GPSに対応していない
            $('#gmap').before('<p>お使いの端末では座標を取得できません。</p>');
            var GPSlat = 35.680786;
            var GPSlng = 139.766405;
            var GPSlatlng = GPSlat+', '+GPSlng;
            resolve(GPSlatlng);
        }else{
            // GPSに対応している
            navigator.geolocation.getCurrentPosition(function(pos) {    // 座標取得
                // 取得成功時の処理
                // var GPSacc = pos.coords.accuracy;

                var GPSlatlng = pos.coords.latitude+', '+pos.coords.longitude;
                resolve(GPSlatlng);
            });
        }
    });
}
// =============
// ▲ 座標取得
// =============

getPos().then(function(result){ console.log(result)});

Comments

[退会済みユーザー]

ありがとうございます！
このようにして使いたいのですが、
console.log(latlng)とすると
Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]:
となってしまいます。

var latlng = getPosResult();

function getPosResult(){
var result = getPos().then(function(result){
return result;
});
return result;
}
function getPos(){
return new Promise(function(resolve, reject){
if (! navigator.geolocation) {
// GPSに対応していない
$('#gmap').before('<p>お使いの端末では座標を取得できません。</p>');
var GPSlat = 35.680786;
var GPSlng = 139.766405;
var GPSlatlng = GPSlat+', '+GPSlng;
resolve(GPSlatlng);
}else{
// GPSに対応している
navigator.geolocation.getCurrentPosition(function(pos) { // 座標取得
// 取得成功時の処理
// var GPSacc = pos.coords.accuracy;

var GPSlatlng = pos.coords.latitude+', '+pos.coords.longitude;
resolve(GPSlatlng);
});
}
});
}

[退会済みユーザー]

一つの変数に結果を入れるようにして、それを色々なところで使いたいです