JavaScript

Geolocation APIで位置情報を取得して、Yahoo!地図を表示

Geolocation APIを使って位置情報を取得して、

Yahoo!地図を表示させてみました。

 

現在位置を取得する場合は、

navigator.geolocation.getCurrentPosition(成功時のコールバック関数, 失敗時のコールバック関数, オプション)

定期的に位置情報を取得する場合には、

navigator.geolocation.watchPosition(成功時のコールバック関数, 失敗時のコールバック関数, オプション)

を使います。

 

取り敢えず、

今回は、navigator.geolocation.getCurrentPosition()で

現在位置を取得してみます。

 

ソースはこんな感じです↓

<!DOCTYPE html>
<html>!!
<head>
<meta charset="utf-8">

<script src="http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid=アプリケーションID" type="text/javascript"  charset="UTF-8" ></script>

</head>
<body>
<div id="map_canvas" style="width:100%;height:400px;"></div>

<script language="JavaScript">

var map = new Y.Map("map_canvas");

window.onload = function(){

//コントロールの追加
map.addControl(new Y.LayerSetControl());
map.addControl(new Y.SliderZoomControlVertical());
map.addControl(new Y.HomeControl());

navigator.geolocation.getCurrentPosition(function(position){

var lat = position.coords.latitude;
var lng = position.coords.longitude;
var latlng = new Y.LatLng(lat, lng);

//地図を表示
map.drawMap(latlng, 15, Y.LayerSetId.NORMAL);

});

}
</script>

</body>
</html>

実際には、

エラーチェックなども入れてやることになるので、

もう少し複雑なコードになると思いますが、

まあこんな感じです

0
この記事を書いている人
株式会社ディープ

名前ダッチ

メールアドレスadachi@deep-deep.jp

Twitterはこちら >>

  • コメント: 0

関連記事

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

最近の記事

  1. ITコンサルティング
  2. トラブル
  3. WP:WordPress(ワードプレス)
  4. WP:WordPress(ワードプレス)
  5. WP:WordPress(ワードプレス)
  6. SNSシェア
  7. 開始
  8. コーディング
  9. WP:WordPress(ワードプレス)
  10. WP:WordPress(ワードプレス)

Twitter

ダッチ@職業ブロガー兼プログラマー
@gatsu0000

  • 以前「田舎って食費掛からんやろ」って言われて、ちょっとイラっとした。 田舎モンも肉食べるし、魚食べるし、野菜も買うよ。 意識して節約しないと、田舎かってそれなりには食費掛かるよ。
    about 2日 ago via Twitter Web App

アーカイブ

PAGE TOP