このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

Archives Details

iPhone 現在地表示 GPSナビ

iPhone

2011.09.20

この記事は最終更新日から1年以上が経過しています。

iPhoneにはiOSというOSが使われており、
iOS3.0からiPhone内蔵webブラウザ「safari」上で動くjavascriptに
GPSデータの取得機能が追加されています。

safariに搭載されているGPS関連機能はW3CのGeolocationAPIに準拠し、

FireFox3.5でも動作させることが可能です。

navigatorオブジェクト内にgeolocationオブジェクトが用意されていて、

取得方法は

navigator.geolocation.getCurrentPosition()     現在の位置情報

navigator.geolocation.watchCurrentPosition()  現在地を定期的に監視

navigator.geolocation.clearWatch()         watchPosition()での監視を中止

となっています。

定期的に取得するのなら

watchPosition()を使用。

watchPosition(update)で値を取得するとupdate関数が呼ばれるように記述。

オブジェクト内には

position.coords.latitude;  //緯度
position.coords.longitude;  //経度
position.coords.altitude;  //高度
position.coords.accuracy;  //水平方向(緯度経度)誤差
position.coords.altitudeAccuracy;  //垂直方向(高さ)誤差
position.coords.heading  //方角
position.coords.speed  //速さ

これらの情報が格納されています。

経度、緯度等の取得

HTML

 

<div id="location">lat,lng,accuracy</div>

JavaScript

<br />
<script type="text/javascript"><br />
window.onload = function(){<br />
navigator.geolocation.watchPosition(update);<br />
}<br />

関数実行させる。

//位置が検出されたら緯度、経度、誤差と時間を表示<br />
function update(position){<br />
var lat = position.coords.latitude; //緯度<br />
var lng = position.coords.longitude; //経度<br />
var acc = position.coords.accuracy; //誤差<br />
document.getElementById("location").innerHTML ="緯度:"+lat+",<br />
<br>経度:"+lng+",<br />
<br>誤差:"+acc+"<br>更新時間:"+(new Date());<br />
}<br />
</script>

(その他スタイル等は任意で。)

デモ

http://webcyou.com/demo/iphone/map.html
現在地の情報取得デモ

Comment

Related Article

バキバキ画面割れ、バッテリー膨張している iPhoneXを修理した話

2021.09.05

【保存版】iPhoneだけで web開発できる 無料アプリをまとめてみました。2016年版

2016.04.22

iPhone6でバックアップから復元出来ない問題

2014.09.23

iPhone5 バッテリー交換プログラム 交換出来ず!

2014.09.15

iTunesで 「iPhoneの内容を読み込めません」エラー等の回避 「DiskAid」アプリでiPhoneのデータをバックアップ

2014.04.29

iPhoneの画面をキャプチャし動画撮影する方法 Reflector

2013.03.24

iPhoneで未開封メール全て開封済みにする

2012.10.13

iOS6にて-webkit-fillterプロパティが対応

2012.10.03

無料で使えるiPhone5のモックアップ用ベクター素材が早くも登場

2012.09.23

CSS3で作成 iPhone風 アイコン

2011.09.20

CATEGORY LIST

LATEST NEWS

Rustで創る MOS 6502 CPU その3 (Cursorと共に)

Rust

2025.02.24

あけましておめでとうございます(24日経過)

イベント

2025.01.24

アーキテクチャConference 2024に参加してきました。

イベント

2024.11.28

Mac minicomでシリアル通信を行う

電子工作

2024.11.21

Mac 容量足りない問題は、外付けSSDで快適に解決!おすすめ外付けSSD

mac

2024.10.16

Z80エミュレータ- EMUZ80の組み立て

電子工作

2024.10.13

Mac VSCodeで、SFML C++開発環境を作る。

C++

2024.09.09

Rust-SDL2 examplesをすべて試す

Rust

2024.09.01

JavaScriptで、DOMを放り投げる処理

JavaScript

2024.07.27

Rustで創る MOS 6502 CPU その2

Rust

2024.07.23

Rustで創る MOS 6502 CPU その1

Rust

2024.07.19

汎用 3D mesh/model viewerを求め。と、簡単に、FBXファイルをglTF(glb)に変換ツールを求め。

C++

2024.06.06

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US