HTML5 위치정보 구문 분석에 대한 예제 튜토리얼
- 零下一度원래의
- 2017-05-26 16:02:581923검색
테스트 데모의 github 주소: github.com/lily1010/html5_geolocation
HTML5 Geolocation API는 사용자의 지리적 위치를 얻는 데 사용됩니다. 본 기능은 사용자의 개인정보를 침해할 수 있으므로, 사용자의 동의 없이는 사용자의 위치정보를 이용할 수 없습니다.
1 지리적 위치에 대한 브라우저 기반 HTML5 검색
html5의 GPS 위치 지정 기능은 navigator.geolocation 속성에 캡슐화되어 있습니다.
(1) getCurrentPosition은 사용자 위치를 한 번만 가져옵니다
(2) watchPosition은 사용자의 현재 위치를 반환하고 사용자가 움직일 때 업데이트된 위치를 계속 반환합니다(자동차의 GPS와 유사).
(3)clearWatch() - watchPosition() 메서드 중지
두 가지 getCurrentPosition 및 watchPosition 메서드의 형식은
getCurrentPosition(successCallback, errorCallback, positionOptions) 및 watchPosition(successCallback, errorCallback, positionOptions)
(1) SuccessCallback은 함수가 성공적으로 호출된 후의 콜백 함수 를 나타냅니다. 이 함수는 하나의 매개 변수, 객체 리터럴 형식을 사용합니다. 획득한 사용자 위치 데이터를 나타냅니다.
(2) errorCallback은 반환된 오류 코드를 나타냅니다. 여기에는 다음 두 가지 속성이 포함됩니다.
1、message：错误信息 2、 code：错误代码。 其中code错误代码包括以下四个值： 1 位置服务被拒绝 2 暂时获取不到位置信息 3 获取信息超时 4 未知错误
(3) positionOptions 데이터 형식은 JSON이며 세 가지 선택적 속성이 있습니다.
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 지도 API
Baidu 지도 수동 주소:developer.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 사용에 대한 자세한 설명지리적 위치 정보를 얻기 위한 HTML5 Geolocation 샘플 코드 공유에 대한 자세한 설명HTML5의 Geolocation API 사용 방법에 대한 자세한 설명HTML5 geolocation-API 및 Haversine 지리공간 거리 알고리즘위 내용은 HTML5 위치정보 구문 분석에 대한 예제 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!