의견 :이 기사는 주로 HTML5 포지셔닝의 예를 소개하고 Baidu지도에 표시합니다. 필요한 친구는 그것을 참조 할 수 있습니다.
모바일 웹 또는 웹 앱을 개발할 때 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지도의 좌표가 특별히 변환되기 때문입니다. 따라서 포지셔닝 좌표를 얻는 것과 맵 초기화 사이에는 좌표 전환 단계가 필요합니다. 이 전환 방법은 이미 Baidu API에서 제공됩니다. 포인트 또는 배치 교체를 변환하는 방법이 제공됩니다. 단일 포인트 변환에는 참조가 필요하며 배치 변환에는 참조가 필요합니다. 여기에서는 전자 만 필요합니다.
bmap.convertor.translate (gpspoint, 0, 콜백);
// gpspoint : 변환 전에 좌표, 두 번째 매개 변수는 변환 메소드이며 0은 GPS 좌표가 Baidu 좌표로 변환되고 콜백 함수로 변환되고 매개 변수는 새로운 좌표 지점입니다.
예제의 자세한 코드는 다음과 같습니다. (견적의 AK는 적용되는 키입니다)
<! doctype html>
<html lang = "zh-cn">
<헤드>
<meta content = "초기 스케일 = 1.0, 사용자-규모 = 아니오" />
<meta http-equiv = "content-type"content = "text /html; charset = utf-8" />
<제목> </title>
<스타일 유형 = "텍스트/CSS">
*{
높이 : 100%; // 높이를 설정하면 표시되지 않습니다
}
</스타일>
<script src = "http://code.jquery.com/jquery-1.11.0.min.js"> </script>
<script type = "text/javaScript"src = "http://api.map.baidu.com/api?v=2.0&ak=/············· </script>
<script type = "text/javaScript"src = "http://developer.baidu.com/map/jsdemo/demo/convertor.js"> </script>
<cript>
$ (function () {
navigator.geolocation.getCurrentPosition (TranslatePoint); // 포지셔닝
});
함수 TranslatePoint (위치) {
var currentLat = position.coords.latitude;
var currentlon = position.coords.longitude;
var gpspoint = new bmap.point (currentLon, currentLat);
bmap.convertor.translate (gpspoint, 0, initmap); // 좌표를 변환합니다
}
함수 initMap (point) {
// 맵을 초기화합니다
map = new bmap.map ( "map");
map.addControl (new bmap.navigationControl ());
map.addControl (new bmap.scalecontrol ());
map.addControl (new bmap.overViewMapControl ());
Map.Centerandzoom (포인트, 15);
Map.addoverlay (New Bmap.Marker (Point))
}
</스크립트>
</head>
<body>
<div> </div>
</body>
</html>
개발 과정에서 컴퓨터 포지셔닝 속도가 약간 느리고 좌표를 얻을 수 없으므로 맵을 표시 할 수 없습니다. 휴대 전화를 사용하여 테스트하는 것이 좋습니다. 위치가 더 빠릅니다.
물론 모바일 웹 페이지 만 개발하는 경우 jQuery를 사용할 필요가 없습니다. 프레임 워크가 너무 커서 다른 경량 모바일 JS 프레임 워크로 전환 할 수 있습니다.