HTML5 지리적 위치 지정 Geolocation-API 및 Haversine 지리 공간적 거리 알고리즘(그래픽 및 텍스트)

黄舟

풀어 주다： 2017-03-11 16:13:26

원래의

3064명이 탐색했습니다.

HTML5는 지리적 위치 좌표를 얻을 수 있는 Geolocation-API를 제공합니다.
그러나 특정 요구에만 사용됩니다.
예를 들어 지도 애플리케이션

일반적으로 거의 사용되지 않습니다

Geolocation-API

사용하는 방법도 매우 간단합니다
navigator.geolocation 개체의 프로토타입에 API가 존재합니다

핵심 메소드는 getCurrentPostion 및 watchPosition입니다

getCurrentPosition

navigator.geolocation.getCurrentPosition 메소드에는 세 개의 매개변수가 있습니다

성공 위치정보 획득 성공 콜백 함수(필수)
error 위치정보 획득 실패 콜백 함수
옵션 구성정보 매개변수 객체

navigator.geolocation.getCurrentPosition(function(pos){
  console.log(pos);//获取位置信息对象Geoposition});

로그인 후 복사

그러면 브라우저가 쿼리를 시작합니다 모든 위치 정보는 개인 정보로 간주되므로

여기에서 공유 허용을 클릭합니다. 위치 정보 그게 다야 그러면 크롬이 로컬 네트워크 정보를 구글 위치 서비스로 보내준다 (구글이 중국에서 차단되어 있어서 벽을 넘어야 위치 정보를 얻을 수 있다〒▽〒)

콘솔에서 우리에게 반환할 수 있는 위치정보

좌표좌표

정확도 위치 정확도(단위 m)
고도 고도
altitudeAccuracy 고도 정확도(단위 m)
진행 방향
위도 위도
경도 경도
속도 속도

timestamp timestamp
```
 
```
로그인 후 복사

그런데 이 좌표는 그다지 정확하지 않습니다(특히 PC에서는) IP 주소, GPS, Wi-Fi 위치 확인 등에서 발생할 수 있습니다.

navigator.geolocation.getCurrentPosition(function(pos){
  console.log(pos);
},function(err){
  console.log(err);
});

로그인 후 복사

지리적 위치 정보 오류를 가져올 때 일부 처리를 수행하도록 두 번째 매개변수를 설정할 수 있습니다

navigator.geolocation.getCurrentPosition(function(pos){
  console.log(pos);
},function(err){
  console.log(err); //获取错误对象PositionError});

로그인 후 복사

예를 들어 이제 위치 정보 공유를 거부합니다

code = 1은 사용자가 거부한다는 뜻입니다
code = 2는 Get 불가
code = 3은 연결 시간 초과를 의미

세 번째 매개변수는 구성 정보를 설정하는 데 사용됩니다

navigator.geolocation.getCurrentPosition(function(pos){
  console.log(pos);
},function(err){
  console.log(err);
},{
  enableHighAccuracy: true,
  timeout: 5000,
  maximumAge: 3000});

로그인 후 복사

enableHighAccuracy 고정밀 위치 필수 여부, 기본값 false
timeout 요청 시간 제한 설정(단위: ms) 기본 무한대에는 시간 제한이 없습니다
maximumAge 위치 정보 만료 시간(ms 단위) 기본값 0: 무조건 새로운 지리적 위치 정보 획득

지리적 위치 정보를 반복적으로 획득하는 경우 watchPosition, 이 매개변수는 위치를 다시 가져오는 데 걸리는 시간을 지정합니다

watchPosition

watchPosition과 getCurrentPosition의 매개변수는 동일합니다 차이는 watchPosition은 지속적으로 위치 정보를 얻습니다 예를 들어 우리가 사용하는 포지셔닝 소프트웨어 달리는 동안 위치가 계속 변하면 위치를 계속 다시 그려야 합니다 이렇게 좌표가 바뀔 때마다 성공 콜백이 발생합니다.

함수가 호출되고 watchPosiiton이 watchID를 반환합니다 clearWatch(warchID)를 통해 모니터링을 취소할 수 있습니다 타이머 취소와 유사

var ID = navigator.geolocation.watchPosition(function(pos){  ...},function(err){  ...},{  ...});
navigator.geolocation.clearWatch(ID);

로그인 후 복사

clearWatch가 매개변수를 사용하지 않는 경우 모든 watchPosition 지우기

Haversine 알고리즘

가끔 두 지점 사이의 거리를 구해야 할 수도 있습니다 예를 들어, 음식 주문 앱에서 근처 업체를 검색하려면 이 경우 Haversine 알고리즘을 사용하여 계산할 수 있습니다

function toRadians(degree) {
  return degree * Math.PI / 180;
}function haversine(latitude1, longitude1, latitude2, longitude2) {
  var R = 6371;  var deltaLatitude = toRadians(latitude2-latitude1);  
  var deltaLongitude = toRadians(longitude2-longitude1);
  latitude1 = toRadians(latitude1);
  latitude2 = toRadians(latitude2);  
  var a = Math.sin(deltaLatitude/2) * Math.sin(deltaLatitude/2) +    
  Math.cos(latitude1) * Math.cos(latitude2) *    
  Math.sin(deltaLongitude/2) * Math.sin(deltaLongitude/2);  
  var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));  
  var d = R * c;  return d;
}

로그인 후 복사

두 점의 좌표를 전달하면 지리적 거리를 얻을 수 있습니다
여기서 var R = 6371;는 지구의 반경 6371km
물론 시간과 정확성 면에서 더 나은 다른 알고리즘
도 있습니다. 차이

위 내용은 HTML5 지리적 위치 지정 Geolocation-API 및 Haversine 지리 공간적 거리 알고리즘(그래픽 및 텍스트)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!