Example of html5 positioning and display on Baidu map_html5 tutorial skills

When developing mobile web or webapp, when using Baidu Map API, it is often necessary to obtain the current location through mobile phone positioning and display it in the center on the map. This requires the use of the geolocation function of HTML5.

Copy code

The code is as follows:

navigator.geolocation.getCurrentPosition(callback);

After successfully obtaining the coordinates, the callback function callback will be executed; the parameter of the callback method is the obtained coordinate point; then you can initialize the map, set the control, center point, zoom level, and then add a point overlay to the map:

Copy code

The code is as follows:

var map = new BMap.Map(" mapDiv");//mapDiv is the id of the div where the map is placed
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl (new BMap.OverviewMapControl());
map.centerAndZoom(point, 15);//point is the coordinate point, 15 is the map zoom level, the maximum level is 18
var pointMarker = new BMap.Marker(point );
map.addOverlay(pointMarker);

However, in fact, this is not enough, and the displayed results are not accurate. This is because the coordinates obtained by getCurrentPosition are GPS longitude and latitude coordinates, and the coordinates of Baidu Map have been specially converted. Therefore, after obtaining the positioning coordinates and initializing One-step coordinate conversion is required between maps. This conversion method is already provided in Baidu API. Methods for converting a single point or batch conversion are provided: single point conversion needs to refer to http://developer.baidu.com/map/ jsdemo/demo/convertor.js, batch conversion needs to refer to http://developer.baidu.com/map/jsdemo/demo/changeMore.js, only the former is needed here:

Copy code

The code is as follows:

BMap.Convertor.translate(gpsPoint, 0 , callback);
//gpsPoint: coordinates before conversion, the second parameter is the conversion method, 0 means the gps coordinates are converted to Baidu coordinates, callback function, the parameter is the new coordinate point

The detailed code of the example is as follows: (the ak in the reference is the application key)

Copy code

The code is as follows:

<script><br /> $(function(){<br /> navigator .geolocation.getCurrentPosition(translatePoint); //Positioning<br /> });<br /> function translatePoint(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); //Convert coordinates<br /> }<br /> function initMap(point){<br /> //Initialize the map<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>

< ;/html>

During the development process, I felt that the computer's positioning speed was a bit slow. It was often impossible to obtain coordinates and the map could not be displayed. It is recommended to use a mobile phone to test, as the positioning is faster.

Of course, if you are only developing mobile web pages, you do not need to use jQuery. The frame is too large, so you can use other lightweight mobile js frameworks.