나는 많은 기술적 인 Daniel과 관련 블로그를 보았고 HTML5의 지리적 위치를 거의 설명하지 못했습니다.
첫째, Google이 본토를 차단했기 때문에 HTML5의 위치를 제공하기 때문에 서비스 제공 업체의 이유는 이것이 주된 이유입니다
둘째, 지리적 포지셔닝은 HTML5가 실질적인 프로젝트 개발이 아닌 타사 도구 유사한 바이두 맵 등과 비교할 수 있습니다!
1. HTML5- 지명 위치 지정의 새로운 특징지리적 포지셔닝은 HTML5의 새로운 기능이므로 관련 API를 배우고 마스터하고 지리적 위치 사용 방법을 배워야합니다.
먼저 상식을 이해합니다
새로운 명사 지질학 :
현재 브라우저가 위치한 위치 지리적 좌표를 얻는 데 사용됩니다. 데이터:
기타 : 경도
위도 : 위도
고도 : 고도
속도 : 속도
플랫폼을 사용하여 모바일 및 PC 끝으로 나뉩니다.
(1) 모바일 브라우저 :
먼저 내장 GPS 데이터를 사용해보십시오. 정확도는 쌀을 기반으로합니다.
그런 다음 모바일베이스 스테이션 번호를 사용하여 해당 지리적 위치 위치 위치 정확도를 바꾸십시오.
(2) PC 브라우저 :
컴퓨터의 IP 주소를 통한 리버스 쿼리-
주제:
그렇다면 HTML5로부터 포지셔닝 정보를 어떻게 얻습니까?우선, F12를 눌러 브라우저에서 콘솔을 열고 Window.navigator.geology를 입력하여 포지셔닝 정보를 확인하십시오!
포지셔닝 정보에는 세 가지 주요 방법이 있으며 의미는 다음과 같습니다.
getCurrentPosition : fn (succ, err) // WatchPosition이 포함 된 현재 위치 지정 데이터를 가져옵니다.
그 이후로 우리는 HTML5 파일에서 지리적 위치를 사용하는 방법을 알고 있습니다.
<! {// 버튼을 클릭하여 navigator.geolocation.getCurrentPosition (succcb, errcb) {// 성공적인 획득 함수! 교차로 Console.log ( '위치를 성공적으로 얻는다'; '+pos.coords.altitude);'속도 : '+pos.coords.speed); 교차로 Console.log ( '고장난 위치 데이터'); }} </script> </body> </html>그림에서 볼 수 있듯이 클릭 버튼이 있으면 위치 데이터가 성공적으로 얻어 지지만 PC 측로 인해 높이와 속도가 늘어나므로 HTML5에서 지리적 위치를 얻기 위해 하나의 방법 만 기억하면됩니다!
navigator.geolocation.getCurrentPosotion (function (pos) {console.log ( ''위치 데이터 획득 성공 '); // pos.coords.longtitude ....} (err) {console.log (' '포지셔닝 데이터 획득 실패 '); // err.message}) 2. 타사 도구-반드두지도를 사용하십시오서문에서 언급했듯이 프로젝트 및 많은 모바일 애플리케이션에서 Baidu지도를 사용하면 포지셔닝 정보를 선택할 수 있습니다.
우선, 우리는 Baidu지도의 소스 코드가 모든 사람에게 다운로드되지 않을 것이라는 것을 알아야합니다. 매우 양심 회사.
단계 사용 :
먼저 공식 웹 사이트 http://lbsyun.baidu.com/을 열고 바닥으로 끌어 당깁니다.
Baidu지도는 웹 개발, Android 개발, iOS 개발에 사용될 수 있음을 알 수 있습니다
URL : http://lbsyun.baidu.com/index.php?
Baidu 맵을 사용하려면 많은 사례로 이동하여 API에서 기능 표시를 할 수 있습니다.
나중에 키가 무엇인지 설명합니다. 로그인 인터페이스를 팝업하면 등록 된 개발자 계정에 로그인하십시오. 관련 휴대 전화, 사서함을 입력 한 다음 확인이 성공한 후에는 응용 프로그램을 만들려면 다음 인터페이스가 나타납니다.
신청 이름을 마음대로 작성하십시오
응용 프로그램 유형 선택 --- 브라우저 NIDE
참조 목록 : 응용 프로그램에 액세스 할 수있는 사람을 말하면 응용 프로그램에 액세스하는 방법에 대한 응용 프로그램에 액세스하고 여기에서 별 번호 ' *'를 작성할 수있는 방법을 참조하십시오. 즉, 모든 사람들이 테스트 만 수행 할 수 있기 때문에 모든 사람들이 액세스 할 수 있습니다. 그리고 프로젝트는 향후 사용될 수 있습니다. 관련 암호화 방법 등이 있습니다! 교차로 그런 다음 제출을 클릭하여 제작을 완료하십시오! 교차로
응용 프로그램을 작성한 후 다음 인터페이스가 나타납니다.
여기에는 응용 프로그램 번호, 응용 프로그램 이름 및 여기에서 생성 된 가장 중요한 액세스 응용 프로그램 코드가 표시되며, 이는 앞에서 언급 한 키입니다!
열쇠를 얻은 후, 우리는 홈페이지 http://lbsyun.baidu.com/index.php?title=jspopular로 돌아갑니다.
왼쪽의 개발 안내서를 클릭하면 관련 API 및 케이스 사용을 볼 수 있습니다! 교차로 이 API는 API에서 가장 양심이며 말도 안되는 것은 없습니다.
글은 매우 상세하고 이해하기 쉽습니다. 너무 많기 때문에 여기에 몇 가지 주요 사용법을 소개합니다! 교차로 교차로
새 HTML 파일을 생성하고 위 코드를 HTML 파일로 복사합니다.
<! = jrbp iu6jcbpsxgvdqxac0c ..... //v2.0 버전 인용 방법 : src = http://api.map.baidu.com/api? 이전 버전 및 이전 버전 참조 방법 : src = http://api.map.baidu.com/api = key & callback = 초기화 </script> <style> {width : 800px 높이 : 500 px} </style> </head> <h1> 바이두 맵 사용 </h1> <div id = container> </div> <script type = text/javaScript> // 지도 이름으로 무거운 무게를 피하기 위해 bmap.map var map = 컨테이너를 사용하십시오 센터 포인트 좌표 및 맵 레벨 1 ~ ~ 레벨 18 Map.Centerandzoom (Point, 18); ); DDControl. 바디> </html>Baidu지도 사용 :
좋아, 우리는 HTML 파일에서 Baidu지도를 성공적으로 사용했습니다. 교차로
관련 기능 설명 :
<스크립트 src = http://api.map.baidu.com/api?
Baidu지도를 인용하려면 AK에 긴 트렁크 키를 입력하십시오! 교차로
맵 인스턴스를 선택하십시오.
var map = new bmap.map (컨테이너);
지정된 지점, 위도 및 경도 정보를 만듭니다! 교차로 모르는 경우 이전 제품을 사용할 수 있습니다.
Navigator.geology.getCurrentPosotion 위도와 경도를 얻는 방법을 선택하십시오.
var point = new bmap.point (116.300982,39.915907);
중앙 지점에서 맵 번호 표시 중심으로, 17은 레벨을 말하며 레벨은 레벨 1에서 18로 나눌 수 있습니다. 레벨의 레벨이 작을수록 맵 범위가 클수록 레벨이 클수록 레벨이 커집니다. 레벨의. 교차로 ---해야 할 일.
Map.Centerandzoom (Point, 17);
맵은 마우스 옵션으로 선택할 수 있습니다.
map.enablescrollwheelzoom (true);
맵은 제어 효과가 자체적으로 테스트됩니다. 이것은 더 이상 설명되지 않은 주요 기능이 아닙니다.
addControl (new bmap.navigationcontrol ());
지도 (레이블)-옵션에 레이블을 표시하십시오
var Marker = map.addoverlay (new bmap.marker (point));
자, 세 번째 -파티 바이두지도는 여기에 언급되어 있습니다. 자체적으로 사용할 수있는 재미있는 기능이 많이 있으므로 API에서 방법과 매개 변수를 찾을 수 있습니다!
위는이 기사의 모든 내용입니다.