Gps/ブラウザで位置情報を取得
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]
開始行:
[[Gps/標高を取得する]]
連載:位置情報を使ってみよう(2)
ブラウザで位置情報を取得してみよう
http://www.atmarkit.co.jp/fnetwork/rensai/ichijouhou02/03...
新日鉄ソリューションズ
笹尾和宏
2009/6/19
Google Mapsとの連携
取得した緯度・経度に対応した地図が表示されるように変更...
[サンプルの実行]
図5 PlaceEngine を利用した Wi-Fiの電波による位置取得とGo...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional...
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; chars...
<meta http-equiv="Content-Script-Type" content="text/java...
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Wi-Fiの電波強度から位置情報を取得</title>
<script src="http://www.placeengine.com/javascripts/pengi...
<script type="text/javascript" src="http://maps.google.co...
<script type="text/javascript">
<!--
// PlaceEngine 用
// キーは http://www.placeengine.com/appk から入手
var pe = {};
var peKey = "PlaceEngineAPIKey";
// Google Maps 用
// キーは http://code.google.com/intl/ja/apis/ajaxsearch/...
var gmap = {};
function initPlaceEngine() {
// PlaceEngine の利用準備
// ( http://www.placeengine.com/doc/tut を参照 )
pe = new PEngine({
// pe.getLocation() が呼び出されたときの処理
onGetLocation: function(longitude, latitude, r, info) {
// HTML表示の更新
document.getElementById("latitude").innerHTML = latitude;
document.getElementById("longitude").innerHTML = longitu...
document.getElementById("address").innerHTML = info.addr;
document.getElementById("floor").innerHTML = info.floor;
document.getElementById("result").innerHTML = r;
// Google Maps の地図を表示
// ( http://code.google.com/intl/ja/apis/maps/documentati...
if (GBrowserIsCompatible()) {
gmap = new GMap2(document.getElementById("map"));
// 緯度、経度、拡大率(14)を指定
gmap.setCenter(new GLatLng(latitude, longitude), 14);
}
},
idstatus:"message",
appkey:peKey
});
}
//-->
</script>
</head>
<body onLoad="initPlaceEngine()" onunload="GUnload()">
<h2>Wi-Fiの電波強度から位置情報を取得</h2>
Wi-Fiの電波から位置情報を取得し、近くの駅を表示します<br>
Place Engine APIの詳細は、 <a href="http://www.placeengin...
<input alt="位置を教える" src="wide_bt2.png" type="image"...
<input alt="現在地を取得" src="wide_bt1.png" type="image"...
<hr>
<div id="message">ネットワークに接続されていないか JavaSc...
<table summary="取得した位置情報">
<tr><td>緯度:</td><td id="latitude">--</td></tr>
<tr><td>経度:</td><td id="longitude">--</td></tr>
<tr><td>住所:</td><td id="address">--</td></tr>
<tr><td>フロア情報:</td><td id="floor">--</td></tr>
<tr><td>推定精度 (m):</td><td id="result">--</td></tr>
</table>
<hr>
<div id="map" style="width:500px;height:300px">地図が表示...
<a href="http://www.placeengine.com/"><img src="logo.png"...
</body>
</html>
では、追加した部分を見ていきましょう。
9行目:Google MapsのAPIを読み込んでいます。GoogleAPIkeyに...
<script type="text/javascript" src="http://maps.google.co...
17~19行目: Google Mapsのオブジェクトを保持する変数を用...
// Google Maps 用
// キーは http://code.google.com/intl/ja/apis/ajaxsearch/...
var gmap = {};
34~41行目:地図を表示するためのコードを記述します。Googl...
// Google Maps の地図を表示
// ( http://code.google.com/intl/ja/apis/maps/documentati...
if (GBrowserIsCompatible())
gmap = new GMap2(document.getElementById("map"));
// 緯度、経度、拡大率(14)を指定
gmap.setCenter(new GLatLng(latitude, longitude), 14);
}
51行目:Google Maps APIを利用した際に、一部のブラウザがメ...
<body onLoad="initPlaceEngine()" onunload="GUnload()">
68行目:地図の表示領域です。37行目のdocument.getElementBy...
<div id="map" style="width:500px;height:300px">地図が表示...
Google APIも使いやすくできているため、このように、簡単...
ブラウザで位置情報を取得してみよう
IPアドレスを利用した位置情報の取得
Wi-Fiの電波を利用した位置情報の取得
Google Mapsとの連携
JSONPを利用したマッシュアップ
位置情報を使ってみよう バックナンバー
第1回 位置情報を取得する仕組み
第2回 ブラウザで位置情報を取得してみよう
終了行:
[[Gps/標高を取得する]]
連載:位置情報を使ってみよう(2)
ブラウザで位置情報を取得してみよう
http://www.atmarkit.co.jp/fnetwork/rensai/ichijouhou02/03...
新日鉄ソリューションズ
笹尾和宏
2009/6/19
Google Mapsとの連携
取得した緯度・経度に対応した地図が表示されるように変更...
[サンプルの実行]
図5 PlaceEngine を利用した Wi-Fiの電波による位置取得とGo...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional...
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; chars...
<meta http-equiv="Content-Script-Type" content="text/java...
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Wi-Fiの電波強度から位置情報を取得</title>
<script src="http://www.placeengine.com/javascripts/pengi...
<script type="text/javascript" src="http://maps.google.co...
<script type="text/javascript">
<!--
// PlaceEngine 用
// キーは http://www.placeengine.com/appk から入手
var pe = {};
var peKey = "PlaceEngineAPIKey";
// Google Maps 用
// キーは http://code.google.com/intl/ja/apis/ajaxsearch/...
var gmap = {};
function initPlaceEngine() {
// PlaceEngine の利用準備
// ( http://www.placeengine.com/doc/tut を参照 )
pe = new PEngine({
// pe.getLocation() が呼び出されたときの処理
onGetLocation: function(longitude, latitude, r, info) {
// HTML表示の更新
document.getElementById("latitude").innerHTML = latitude;
document.getElementById("longitude").innerHTML = longitu...
document.getElementById("address").innerHTML = info.addr;
document.getElementById("floor").innerHTML = info.floor;
document.getElementById("result").innerHTML = r;
// Google Maps の地図を表示
// ( http://code.google.com/intl/ja/apis/maps/documentati...
if (GBrowserIsCompatible()) {
gmap = new GMap2(document.getElementById("map"));
// 緯度、経度、拡大率(14)を指定
gmap.setCenter(new GLatLng(latitude, longitude), 14);
}
},
idstatus:"message",
appkey:peKey
});
}
//-->
</script>
</head>
<body onLoad="initPlaceEngine()" onunload="GUnload()">
<h2>Wi-Fiの電波強度から位置情報を取得</h2>
Wi-Fiの電波から位置情報を取得し、近くの駅を表示します<br>
Place Engine APIの詳細は、 <a href="http://www.placeengin...
<input alt="位置を教える" src="wide_bt2.png" type="image"...
<input alt="現在地を取得" src="wide_bt1.png" type="image"...
<hr>
<div id="message">ネットワークに接続されていないか JavaSc...
<table summary="取得した位置情報">
<tr><td>緯度:</td><td id="latitude">--</td></tr>
<tr><td>経度:</td><td id="longitude">--</td></tr>
<tr><td>住所:</td><td id="address">--</td></tr>
<tr><td>フロア情報:</td><td id="floor">--</td></tr>
<tr><td>推定精度 (m):</td><td id="result">--</td></tr>
</table>
<hr>
<div id="map" style="width:500px;height:300px">地図が表示...
<a href="http://www.placeengine.com/"><img src="logo.png"...
</body>
</html>
では、追加した部分を見ていきましょう。
9行目:Google MapsのAPIを読み込んでいます。GoogleAPIkeyに...
<script type="text/javascript" src="http://maps.google.co...
17~19行目: Google Mapsのオブジェクトを保持する変数を用...
// Google Maps 用
// キーは http://code.google.com/intl/ja/apis/ajaxsearch/...
var gmap = {};
34~41行目:地図を表示するためのコードを記述します。Googl...
// Google Maps の地図を表示
// ( http://code.google.com/intl/ja/apis/maps/documentati...
if (GBrowserIsCompatible())
gmap = new GMap2(document.getElementById("map"));
// 緯度、経度、拡大率(14)を指定
gmap.setCenter(new GLatLng(latitude, longitude), 14);
}
51行目:Google Maps APIを利用した際に、一部のブラウザがメ...
<body onLoad="initPlaceEngine()" onunload="GUnload()">
68行目:地図の表示領域です。37行目のdocument.getElementBy...
<div id="map" style="width:500px;height:300px">地図が表示...
Google APIも使いやすくできているため、このように、簡単...
ブラウザで位置情報を取得してみよう
IPアドレスを利用した位置情報の取得
Wi-Fiの電波を利用した位置情報の取得
Google Mapsとの連携
JSONPを利用したマッシュアップ
位置情報を使ってみよう バックナンバー
第1回 位置情報を取得する仕組み
第2回 ブラウザで位置情報を取得してみよう
ページ名: