Monacaには、アプリからカメラや各種センサーなどの各種ハードウェア機能を呼び出すための命令が組み込まれています。今回は位置情報を取得する方法を紹介します。
諸注意
モバイル端末のハードウェア機能を呼び出すため、MonacaIDEのプレビューでは動作しません。デバッガーアプリをご用意ください。また、ハードウェア機能の呼び出しにはアプリ内で準備が必要なため、deviceready イベントを考慮する必要があります。
サンプルアプリ
書籍のサポートページから入手して下さい。
ひな形版と完成版をご用意しております。
位置情報を呼び出す方法
navigator.geolocation.getCurrentPosition( 完了時に実行する関数, エラー時に実行する関数);
navigator.geolocation.getCurrentPosition()命令はGPS やネットワーク情報などを元に現在地の場所を推定し、緯度と経度の情報を取得する命令です。
この命令はCordovaを利用しているため、MonacaIDEのプレビューでは動作せず、Monacaデバッガーの利用が必須となります。
document.addEventListener("deviceready", function() {
// 現在地情報を取得する
navigator.geolocation.getCurrentPosition(onSuccess, onError);
});
// 現在地取得に成功した場合の処理
function onSuccess(position){
// 緯度
var latitude = position.coords.latitude;
// 経度
var longitude = position.coords.longitude;
document.writeln(" 緯度:" + latitude);
document.writeln(" 経度:" + longitude);
}
// 現在地取得に失敗した場合の処理
function onError(error){
alert(error.message);
}
解説
アプリを起動するとすぐに13 行目のdeviceready イベントが発生します。15 行目で現在地
情報を取得する命令を実行し、問題なく取得を行うことができたら19 行目の成功時に実行
する関数が呼び出されます。緯度と経度はそれぞれ引数の中の「coords.latitude」と「coords.longitude」の中にセットされています。
応用例1:緯度・経度から住所への変換
端末から緯度経度情報を取得するだけでは少し寂しいので、外部のWebAPIと連携したアプリにも挑戦してみましょう。
今回は、農研機構の「簡易逆ジオコーディングサービス」という位置情報に関するプログラムを利用して緯度・経度から住所への変換を行います。
なお、iOSではWebAPIをを呼び出す際に「CORS 対応」が必須となります。同サービスは2020年11月現在、CORS 対応しておりiOS で動作が確認できました。
document.addEventListener("deviceready", function() {
// 現在地情報を取得する
navigator.geolocation.getCurrentPosition(onSuccess, onError);
});
// 現在地取得に成功した場合の処理
function onSuccess(position){
// 緯度取得
var latitude = position.coords.latitude;
// 経度取得
var longitude = position.coords.longitude;
// 表示
document.writeln(" 緯度:" + latitude);
document.writeln(" 経度:" + longitude);
// 逆ジオコーディングを実行
var url = "https://aginfo.cgk.affrc.go.jp/ws/rgeocode.php?json&"
+ "lat=" + latitude
+ "&lon=" + longitude;
console.log(url);
fetch(url)
.then(function(response) {
return response.json();
})
.then(function(address) {
var address = " 住所:"
+ address.result.prefecture.pname
+ address.result.municipality.mname
+ address.result.local[0].section;
alert(address);
});
}
// 現在地取得に失敗した場合の処理
function onError(error){
alert(error.message);
}
解説
「簡易逆ジオコーディングサービス」に緯度経度を渡すと、住所が返却されます。詳細は以
下のWeb サイトを確認してください。
簡易逆ジオコーディングサービス
なお、番地情報は、実態と異なる場合があり、またプライバシーにも関わることがありま
すので、特に慎重に扱って下さい。
応用例2:緯度・経度から住所への変換(Google Maps編)
iOSで逆ジオコーディングを行いたい場合、CORSに対応したWebAPIが必要になります。対応しているAPIとして、Google Maps Platformの位置情報 APIなどがあります。
位置情報 API | Google Maps Platform | Google Cloud
なお、利用にはGoogle上でのアカウント登録とAPIキー発行が必要となります。
サンプルコード
まず、Google MapsのAPIライブラリをAPIキー付きで呼び出します。
<script src="https://maps.googleapis.com/maps/api/js?key=********"></script>
次にJavaScriptで緯度経度を取得して、Googleのgeocode()命令に情報を渡します。
document.addEventListener("deviceready", function() {
// 現在地情報を取得する
navigator.geolocation.getCurrentPosition(onSuccess, onError);
});
function onSuccess(position){
// 緯度
var latitude = position.coords.latitude;
// 経度
var longitude = position.coords.longitude;
document.writeln(" 緯度:" + latitude);
document.writeln(" 経度:" + longitude);
// Google Maps API を実行
var geo = new google.maps.Geocoder();
var param = {location: new google.maps.LatLng(latitude, longitude)};
geo.geocode(param, function(result) {
address = result[0].formatted_address;
alert(address);
});
}
// 現在地取得に成功した場合の処理
function onError(error){
alert(error.message);
}