HTML5 포지셔닝은 현재 위치를 가져와 Baidu map_html5 튜토리얼 기술에 표시합니다.-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

HTML5 포지셔닝은 현재 위치를 가져와 Baidu map_html5 튜토리얼 기술에 표시합니다.

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:47 PM

html5 위치 바이두 지도

모바일 웹이나 웹앱을 개발할 때 Baidu Map API를 사용할 때 휴대폰 측위를 통해 현재 위치를 파악하여 지도 중앙에 표시해야 하는 경우가 많습니다. 이를 위해서는 HTML5의 위치정보 기능을 사용해야 합니다.

코드 복사

코드는 다음과 같습니다.

navigator.geolocation.getCurrentPosition( 콜백);

좌표를 성공적으로 획득한 후 콜백 함수 콜백이 실행됩니다. 콜백 메서드의 매개변수는 획득된 좌표 지점이며, 지도를 초기화하고 중심을 설정할 수 있습니다. 포인트, 확대/축소 수준을 지정한 다음 지도 오버레이에 포인트를 추가합니다.

코드 복사

코드는 다음과 같습니다.

var map = new BMap.Map("mapDiv");//mapDiv는 지도가 배치된 div의 ID입니다.
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl())
map.centerAndZoom(point, 15); 15는 지도 확대/축소 수준이고 최대 수준은 18입니다.
var pointMarker = new BMap.Marker(point)
map.addOverlay(pointMarker)

, 이것으로는 충분하지 않으며, 표시된 결과가 정확하지 않습니다. 이는 getCurrentPosition으로 얻은 좌표가 GPS 경도 및 위도 좌표이며, Baidu Map의 좌표를 특별히 변환하기 때문입니다. 따라서 획득 사이에 좌표 변환 단계가 필요합니다. 위치 좌표 및 지도 초기화 이 변환 방법은 Baidu API에서 제공되며 포인트 변환 또는 일괄 변환 방법이 모두 제공됩니다. 단일 포인트 변환은 http://developer.baidu.com/을 참조해야 합니다. map/jsdemo/demo/convertor.js, 일괄 변환은 http://developer.baidu.com/map/jsdemo/demo/changeMore .js를 참조해야 하며 여기서는 전자만 필요합니다:

코드 복사

코드는 다음과 같습니다.

BMap.Convertor.translate(gpsPoint, 0, callback) ;
//gpsPoint: 변환 전 좌표, 두 번째 매개변수는 변환 방법, 0은 GPS 좌표가 Baidu 좌표로 변환됨을 의미, 콜백 함수, 매개변수는 새 좌표 클릭

예시의 상세 코드는 다음과 같습니다. (참고자료의 ak는 애플리케이션 키입니다.)

코드 복사

코드는 다음과 같습니다:

"viewport" content="initial-scale=1.0, user-scalable=no" />