iphoneやAndroidのGPSを利用して位置情報を取得したい場合、
getCurrentPositionで簡単に取得できます。
使い方はと言うと、
navigator.geolocation.getCurrentPosition(callbackOk, callbackError);
とするだけ。
callbackOkは位置情報の取得成功時に呼び出されるコールバック関数、
callbackErrorはエラー時に呼び出されるコールバック関数です。
※コールバック関数名は任意です。
あとは、
位置情報の取得に成功していれば、
緯度・経度をそれぞれ「position.coords.longitude」・「position.coords.latitude」へ入れてくれます。
ということで、
勉強がてらGoogleMap Ver3と絡めた簡単なプログラムを組んでみました。
↓こんな感じです
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="format-detection" content="telephone=no">
<title></title>
<!-- Google Map -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<!-- Google Map -->
<style>
#canvas{
width:310px;
height:263px;
margin:0 auto;
padding:0px;
text-align:center;
}
</style>
<script>
//ユーザーの現在の位置情報を取得
/*
* callbackOk：位置情報取得成功時のコールバック関数
* callbackError：位置情報取得失敗時のコールバック関数
*/
navigator.geolocation.getCurrentPosition(callbackOk, callbackError);
//位置情報の取得に成功した場合
function callbackOk(position){
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var opts = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("canvas"), opts);
//マーカー 指定の座標に設置
var marker = new google.maps.Marker({position: latlng, map: map});
}
//位置情報の取得に失敗した場合
function callbackError(error){
var error_message = "";
switch(error.code){
case 1:
error_message = "位置情報の取得が許可されていません。";
break;
case 2:
error_message = "端末の位置情報が利用できません。";
break;
case 3:
error_message = "タイムアウトしました。";
break;
}
document.getElementById("canvas").innerHTML = error_message;
}
</script>
</head>
<body>
<article id="conts">
<div id="canvas"></div>
</article>
</body>
</html>
こんな感じで位置情報を取得して地図表示は可能です。
Google Mapについては今回は説明しないので、↓こちらを参考にしてください。
[ Google Maps API Ver.3 で地図を表示 ]
あと、
Geolocation APIについてはこの辺のサイトなんかを参考にすると良いと思います。
http://gihyo.jp/dev/feature/01/location-based-services/0003
この記事へのコメントはありません。