より人気のあるタイプのサービスは、ロケーションベースのサービス（LBS）と呼ばれます。このタイプのサービスは、企業が特定のポイントの座標近くの領域（ユーザーが位置する場所など）を使用する情報です。 HTML5では、新しいジオロケーションAPIが追加され、ジオロケーションを決定および共有しました。
プライバシーステートメントリモートWebサーバーと物理的な場所を共有する場合、プライバシーは懸念事項です。したがって、Geolocation APIでは、Webアプリケーションが位置情報にアクセスする前に、ユーザーがアクセス許可を提供する必要があります。最初にジオロケーションデータを要求するWebページにアクセスすると、ブラウザは通知バーを表示して、ユーザーの場所へのアクセスを提供するように求められます。ブラウザのプロンプトに従って、関連する承認を選択します。
ユーザーが権限を付与しない場合、位置情報はWebアプリケーションに提供されません。関連するAPIを呼び出すと、成功したコールバックがトリガーされません。
ブラウザのサポートを確認してくださいGeolocation APIは、主流のブラウザの最新バージョンでサポートされていますが、古いブラウザと互換性があるため、まだチェックアウトする必要があります。 Geolocation APIが使用できない場合、window.navigator.geolocationは次のようにnullになります。
関数show_islocationEnabled（）
{
var str = "いいえ、ジオロケーションはサポートされていません。";
if（window.navigator.geolocation）{
str = "はい、ジオロケーションがサポートされています。";
}
アラート（str）;
}
Geolocation APIは、Navigation Global Object：Navigator.Geolocationの新しいプロパティに基づいています。これは、訪問者のブラウザーとシステムに関する有用な情報を提供します。地理的情報は、ベースステーション、Webデータベース、GPSなど、多くの手段を通じて取得できます。異なる方法を使用して取得した地理的情報の精度も異なります。一般的に、最も正確なものはGPSを通じて取得されます（ほとんどのGPSはモバイルプラットフォームで使用され、PCプラットフォームは基本的にネットワークデータに依存しています）。偶然にも、一部の場所では、明確な地理的位置の測定値を取得したり、データを受け取ったりできない場合があります。
現在の場所を配置しますGetCurrentPosition（）Navigation.Geolocationの方法を使用して、ユーザーの現在の場所を取得します。このメソッドは、位置情報を1回だけ取得します。メソッドがスクリプトによって呼び出されると、メソッドは非同期にホストデバイスの現在の場所を取得しようとします。
メソッド署名：getCurrentPosition（GeolocationsuccessCallback、[GeolocationErrorCallback、GeolocationOptions]）;
1。GeolocationsuccessCallback：現在の場所が成功した後（必須）後にコールバックを取得
2。GeolocationErrorCallback。エラーが発生したときに使用されるコールバック（オプション）
3。ジオロケーションオプション。ジオロケーションオプション（オプション）
位置情報を処理します
getCurrentPositon（）メソッドが現在の位置を正常に取得した後、位置情報をポジションオブジェクトに保存し、このオブジェクトをパラメーターとして使用して、Geolocationsuccescaslbackのコールバックを実行します。このコールバック関数では、このオブジェクトに含まれる情報を任意に処理できます。
位置オブジェクトには、タイムスタンプと座標の2つのプロパティがあります。タイムスタンプ属性は、ジオロケーションデータの作成時間を表し、Coords属性はジオロケーション情報を表し、7つの属性が含まれています。
.Coords.latitude：緯度を推定します
。座標の長さ：経度を推定します
.Coords.Altitude：推定高さ
。座標：計量と緯度の推定の精度とメートルで提供される
.COORDS.ALTITUDEACCURACY：メートルで提供される高さ推定の精度
。座標：ヘディング：現在移動しているホストデバイスの角方向、北方向に比べて時計回りに計算された
.COORDS.SPEED：デバイスの現在の地上速度は1秒あたりメートルで
一般に、これらのプロパティのうち3つが保証されています。Coords。 -Latitude、Coords.Longitude、およびCoords.Accuracy、およびREST RETURN NULL。これは、デバイスの機能と、使用するバックエンド位置決めサーバーに依存します。さらに、ユーザーの以前の位置に基づいて、見出しと速度のプロパティを計算できます。
取り扱いエラーgetCurrentPositon（）メソッドを実行するときにエラーが発生した場合、メソッドはPositionErrorオブジェクトをGeolocationErrorCallbackコールバックに渡します。
ジオロケーションオプションを設定しますGeolocationOptionsの3つのプロパティを設定できます。
EnableHighAccuracy：デバイスが高精度をサポートする場合、このオプションは高精度が有効になっているかどうかを示します。
タイムアウト：クエリタイムアウト
Maximageage：キャッシュの最大回数は、キャッシュを使用できます。
以下の完全な例を参照してください。
<！doctype html>
<html>
<body>
<p id = "demo"> [ボタン]をクリックして、位置を取得します：</p>
<button onclick = "getLocation（）">試してみてください</button>
<div id = "maholder"> </div>
<スクリプト>
var x = document.getElementById（ "demo"）;
関数getLocation（）{
if（navigator.geolocation）{
navigator.geolocation.getCurrentPosition（ShowPosition、Showerror）;
}
それ以外{
x.innerhtml = "ジオロケーションは、このブラウザによってサポートされていません。";
}
}
関数ショーポジション（位置）{
var latlon = position.coords.latitude+"、"+position.coords.longitude;
var img_url = "http://maps.googleapis.com/maps/api/staticmap?center=" +
latlon + "＆zoom = 9＆size = 400x300＆sensor = false";
document.getElementById（ "maholder"）。innerhtml = "<img src = '"+img_url+"' />";
}
function showerror（エラー）{
switch（error.code）{
ケースERROR.PERISTION_DENIED：
x.innerhtml = "ユーザーはジオロケーションの要求を拒否しました。」
壊す;
ケースエラー.position_unavailable：
x.innerhtml = "位置情報は利用できません。"
壊す;
ケースERROR.TIMEOUT：
x.innerhtml = "ユーザーの場所をタイミングで取得するリクエスト。"
壊す;
ケースエラー.unknown_error：
x.innerhtml = "未知のエラーが発生しました。"
壊す;
}
}
</script>
</body>
</html>
この例では、現在のデバイスの地理的位置を取り、Googleマップに表示します。もちろん、Baidu Maps APIの静的グラフバージョンを使用して、この例を変換できます。 Baidu Map APIについては、実際のリファレンスのリンクを後で参照してください。
オン/キャンセル継続的な位置付けwatchposition（）navigation.geolocationの方法を使用して、ユーザーの場所を定期的に投票して、ユーザーの場所が変更されたかどうかを確認します。この方法には3つのパラメーターがあります。これらの3つのパラメーターは、GetCurrentPosition（）メソッド、成功したコールバック、失敗したコールバック、および位置情報を取得するオプションと同じです。この方法には、継続的なポジショニングをキャンセルするために使用される返品値のwatchIDがあります。
ClearWatch（）Navigation.Geolocationの方法を使用して、進行中のWatchPosition（）を終了します。
次の例を参照してください。
<！doctype html>
<html>
<head>
<Title> Geolocation API例：場所の更新を聞く</title>
<meta http-equiv = "x-ua-compatible" content = "ie = 9" />
<script type = "text/javascript">
関数settext（val、e）{
document.getElementById（e）.value = val;
}
var nav = null;
var witchid;
function ristenforpositionUpdates（）{
if（nav == null）{
nav = window.navigator;
}
if（nav！= null）{
var geoloc = nav.geolocation;
if（geoloc！= null）{
watchid = geoloc.watchposition（successcallback）;
}
それ以外 {
アラート（ "ジオロケーションがサポートされていない"）;
}
}
それ以外 {
アラート（ "Navigator not not ingod"）;
}
}
function clearwatch（watchID）{
window.navigator.geolocation.clearwatch（watchID）;
}
関数SuccessCallback（位置）
{
settext（position.coords.latitude、 "latitude"）;
settext（position.coords.longitude、 "経度"）;
}
</script>
</head>
<body>
<ラベル= "latitude"> latitude：< /label> <入力id = "latitude" />
<ラベル= "経度">経度：< /label> <入力id = "経度" />
<入力タイプ= "ボタン"値= "緯度と経度を監視" onclick = "ristensforpositionupdates（）" />
<入力型= "ボタン"値= "clear watch" onclick = "clearwatch（）" />
</body>
</html>
実用的なリファレンス：公式文書：http：//www.w3schools.com/html5/html5_geolocation.asp
テンプレートの心配：http：//www.cuoxin.com/w3school/html5/
Microsoftヘルプ：http：//msdn.microsoft.com/zh-cn/library/gg589502(v=vs.85）
Baidu Map API：http：//dev.baidu.com/wiki/static/index.htm