ホームページ > 記事 > ウェブフロントエンド > HTML5 地理位置情報の解析に関するチュートリアルの例
HTML5 地理位置情報の解析に関するチュートリアルの例
- 零下一度オリジナル
- 2017-05-26 16:02:581891ブラウズ
テストデモの github アドレス: github.com/lily1010/html5_geolocation
HTML5 Geolocation API は、ユーザーの地理的位置を取得するために使用されます。この機能はユーザーのプライバシーを侵害する可能性があるため、ユーザーの同意がない限りユーザーの位置情報を取得することはできません。
ブラウザベースの HTML5 位置検索
html5 の GPS 測位関数は、navigator.geolocation 属性にカプセル化されています:
(1) getCurrentPosition はユーザーの位置を 1 回だけ取得します
(2)。 watchPosition はユーザーの現在位置を返し、ユーザーが移動すると更新された位置を返し続けます (車の GPS のように)。
(3) clearWatch() - watchPosition() メソッドを停止します
2 つの getCurrentPosition メソッドと watchPosition メソッドの形式は、
getCurrentPosition(successCallback,errorCallback,positionOptions) と watchPosition(successCallback,errorCallback,positionOptions) です
( 1) successCallback は、関数の呼び出しが成功した後のコールバック関数を表します。この関数は、取得されたユーザーの位置データを表すオブジェクト リテラル形式のパラメーターを 1 つ受け取ります。
(2)errorCallback は返されたエラー コードを表します。これには、次の 2 つの属性が含まれています:
1、message：错误信息 2、 code：错误代码。 其中code错误代码包括以下四个值： 1 位置服务被拒绝 2 暂时获取不到位置信息 3 获取信息超时 4 未知错误
(3) PositionOptions データ形式は JSON で、オプションの属性が 3 つあります:
1、enableHighAcuracy — 布尔值： 表示是否启用高精确度模式，如果启用这种模式，浏览器在获取位置信息时可能需要耗费更多的时间。 2、timeout — 整数： 表示浏览需要在指定的时间内获取位置信息，否则触发errorCallback。 3、maximumAge — 整数/常量： 表示浏览器重新获取位置信息的时间间隔。
テスト例を見てみましょう: (位置決めは事前にオンにする必要があることに注意してください)効果がわかります)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>基于浏览器的HTML5查找地理位置</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script>
var options={
enableHighAccuracy:true, //高精度定位参数
maximumAge:1000
}
function getLocation(){
if(navigator.geolocation){
//浏览器支持geolocation
navigator.geolocation.getCurrentPosition(onSuccess,onError,options); //getCurrentPosition 只获取一次用户的地理位置函数
//onSuccess成功返回的回调函数(必选),onError失败返回的回调函数(可选),设置精确度等参数(可选options)
//navigator.geolocation.watchPosition(onSuccess,onError,options); //watchPosition 继续获取用户的位置,适合于导航
//onSuccess成功返回的回调函数(必选),onError失败返回的回调函数(可选),设置精确度等参数(可选options)
}else{
//浏览器不支持geolocation
alert ('您的浏览器暂不支持定位');
}
}
//成功时
function onSuccess(position){
//返回用户位置
//经度
var longitude =position.coords.longitude;
//纬度
var latitude = position.coords.latitude;
//精确度
var accuracy = position.coords.accuracy;
//高度精确度
var altitudeAccuracy = position.coords.altitudeAccuracy;
//设备正北顺时针前进的方位
var heading = position.coords.heading;
//设备外部环境的移动速度(m/s)
var speed = position.coords.speed;
//当位置捕获到时的时间戳
var timestamp = position.timestamp;
document.getElementById("container").innerHTML= "您的经度是="+longitude+'<br>'
+"您的纬度是="+latitude+'<br>'+"您的精确度是="+accuracy+'<br>'
+"您的高度精确度是="+altitudeAccuracy+'<br>'+"您的设备正北顺时针前进的方位是="+heading+'<br>'
+"您的设备外部环境的移动速度(m/s)是="+speed+'<br>'+"您的当位置捕获到时的时间戳是="+timestamp+'<br>';
}
//失败时
function onError(error){
switch(error.code){
case 1:alert("位置服务被拒绝");break;
case 2:alert("暂时获取不到位置信息");break;
case 3:alert("获取信息超时");break;
case 4:alert("未知错误");break;
}
}
window.onload=getLocation;
</script>
</head>
<body>
<p id="container" style="300px;height: 300px"></p>
</body>
</html>中国では Google Chrome がブロックされているため、上記のコードは携帯電話でテストするのが最適です。
2 HTML5 地理位置情報呼び出し Baidu Map API
Baidu Map マニュアルのアドレス: .baidu.com/map /jsdemo-mobile.htm#i7_1
HTML5 は正確な位置情報ではないため、地図上で効果を表示する際には常に数百メートルの誤差が生じることを事前に説明しておきます
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>基于浏览器的HTML5查找地理位置和调取百度地图api</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<!-- 百度API -->
<script src="http://api.map.baidu.com/api?v=1.2" type="text/javascript"></script>
<script>
var options={
enableHighAccuracy:true, //高精度定位参数
maximumAge:1000
}
function getLocation(){
if(navigator.geolocation){
//浏览器支持geolocation
navigator.geolocation.getCurrentPosition(onSuccess,onError,options); //getCurrentPosition 只获取一次用户的地理位置函数
//onSuccess成功返回的回调函数(必选),onError失败返回的回调函数(可选),设置精确度等参数(可选options)
//navigator.geolocation.watchPosition(onSuccess,onError,options); //watchPosition 继续获取用户的位置,适合于导航
//onSuccess成功返回的回调函数(必选),onError失败返回的回调函数(可选),设置精确度等参数(可选options)
}else{
//浏览器不支持geolocation
alert ('您的浏览器暂不支持定位');
}
}
//成功时
function onSuccess(position){
//返回用户位置
//经度
var longitude =position.coords.longitude;
//纬度
var latitude = position.coords.latitude;
//使用百度地图API
//创建地图实例
var map =new BMap.Map("container");
//创建一个坐标
var point =new BMap.Point(longitude,latitude);
//地图初始化，设置中心点坐标和地图级别
map.centerAndZoom(point,15);
map.addOverlay(new BMap.Marker(point)); //在地图上你的位置显示红色点点
}
//失败时
function onError(error){
switch(error.code){
case 1:alert("位置服务被拒绝");break;
case 2:alert("暂时获取不到位置信息");break;
case 3:alert("获取信息超时");break;
case 4:alert("未知错误");break;
}
}
window.onload=getLocation;
</script>
</head>
<body>
<p id="container" style="300px;height: 300px"></p>
</body>
</html>上記のコードは携帯電話でテストされています。誤差は少し大きいですが、正確な測位には適していませんが、都市への測位はまだ良好です
[関連推奨事項]
2 HTML5-Geolocation APIのサンプルコード
3. html5 navigator.geolocation ブラウザに基づいて地理的位置コードを取得するケース
4.html5ガイド(4) - Geolocationの使い方の詳細な説明
5. HTML5 Geolocationの詳細説明 地理的位置情報を取得するサンプルコード共有
6. HTML5のGeolocation Geolocation Positioning APIの使い方の詳細説明
7. HTML5 Geolocation Positioning Geolocation-APIとHaversine geospatial距離アルゴリズム (画像とテキスト)
以上がHTML5 地理位置情報の解析に関するチュートリアルの例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。