このサイトは、只今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 />
&lt;script type=&quot;text/javascript&quot;&gt;<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(&quot;location&quot;).innerHTML =&quot;緯度:&quot;+lat+&quot;,<br />
&lt;br&gt;経度:&quot;+lng+&quot;,<br />
&lt;br&gt;誤差:&quot;+acc+&quot;&lt;br&gt;更新時間:&quot;+(new Date());<br />
}<br />
&lt;/script&gt;

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

デモ

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

Comment

Related Article

【保存版】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

CSS Media Queries(メディアクエリ)を使用した指定方法

2011.09.20

CATEGORY LIST

LATEST NEWS

PythonでGUIアプリ開発「PyQt」を使った感想

Python

2019.07.18

「二段階認証?」という方も 5分で覚える パスワードレス WebAuthnのまとめ

JavaScript

2019.07.07

上級者向け JavaScript 問題集 「javascript-questions」日本語翻訳担当してます。

JavaScript

2019.06.22

Wordpress サイトで、長時間 500 Internal Server Error発生。解決した方法とは。

WordPress

2019.06.18

Ubuntu 18.04 LTSで OpenGL開発

ubuntu

2019.05.20

MacOS Mojave (10.14.4)の Xcode に、過去のMacOSのSDKをインストール

C++

2019.05.19

クローンソフトの「EaseUS Disk Copy」を使って、OSのバックアップを取ってみた。

tool

2019.05.06

Rails5 gemでmysql2が インストールできない

Ruby

2019.05.05

平成最後のお買い物!!「Logicool MX Master 2 Wireless Mouse」と「K780 マルチデバイス BLUETOOTH® キーボード」で快適PC生活。

ubuntu

2019.04.27

Amazon 87時間のビックセール タイムセール祭りで購入したもの

イベント

2019.04.23

Androidに Linuxを簡単にインストールするアプリ「UserLAnd」

Linux

2019.04.16

SPAサイトでの認証認可 JWT✗Rails5✗Nuxt.js

JavaScript

2019.03.24

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

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

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

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

FOLLOW US