Baidu map_html5 튜토리얼 기술의 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);//point는 좌표 지점, 15는 지도 확대/축소 수준, 최대 수준은 18
var pointMarker = new BMap.Marker(point );
map.addOverlay(pointMarker);

그러나 사실 이것만으로는 충분하지 않으며, getCurrentPosition으로 얻은 좌표가 GPS 경도 및 위도 좌표이고, 따라서 이후에 바이두 지도의 좌표가 특수하게 변환되었기 때문에 표시되는 결과가 정확하지 않습니다. 위치 좌표 획득 및 초기화 지도 간 원스텝 좌표 변환이 필요합니다. 이 변환 방법은 이미 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는 애플리케이션 키입니다.)

코드 복사

코드는 다음과 같습니다.

<스크립트 유형 ="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js">
<script><br> $(함수( ){<br> navigator .geolocation.getCurrentPosition(translatePoint); //위치 지정<br> });<br> function movePoint(position){<br> var currentLat = position.coords.latitude;<br> var currentLon = position.coords.longitude; <br> var gpsPoint = new BMap.Point(currentLon, currentLat);<br> BMap.Convertor.translate(gpsPoint, 0, initMap) //좌표 변환<br> }<br> 함수 initMap(point){<br> //지도 초기화<br> map = new BMap.Map("map");<br> map.addControl(new BMap.NavigationControl());<br> map.addControl( new BMap.ScaleControl()) ;<br> map.addControl(new BMap.OverviewMapControl());<br> map.centerAndZoom(point, 15);<br> map.addOverlay(new BMap.Marker(point)) <br> }<br> </script>

< /body>
< ;/html>

개발 과정에서 컴퓨터의 측위 속도가 약간 느리다는 느낌을 받았는데, 좌표 획득이 불가능하고 지도가 표시되지 않는 경우가 많았습니다. 더 빠르게.

물론, 모바일 웹페이지만 개발하는 경우에는 jQuery를 사용할 필요가 없으므로 프레임이 너무 크기 때문에 다른 경량 모바일 JS 프레임워크를 사용해도 됩니다.