Html5 is positioned and displayed on Baidu Map

When developing a mobile web or webapp, when using the Baidu map API, you often need to locate the current location on your mobile phone and display it in the center of the map, this requires the geographical location function of html5.

navigator.geolocation.getCurrentPosition(callback);

After the coordinates are obtained, the callback function callback is executed. The parameters of the callback method are the coordinates obtained. Then, you can initialize the map and set controls, centers, and scaling levels, then add the point overlay to the map:

 map =  BMap.Map("mapDiv");map.addControl(15); 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, while those obtained by Baidu map are specially converted, one-step coordinate transformation is required between obtaining the positioning coordinate and initializing the map. This conversion method is provided in Baidu API. The conversion methods for converting a vertex or bulk replacement are provided: for Single Point conversion, you must reference http://developer.baidu.com/map/jsdemo/demo/convertor.js. For batch conversion, you must reference batch conversion:

BMap.Convertor.translate(gpsPoint, 0, callback); 

The sample code is as follows: (the ak in the reference is the applied key)

During the development process, I felt that the positioning speed of the computer was a little slow, and the coordinates were often unable to be obtained, resulting in the map could not be displayed. We recommend that you use a mobile phone to test the positioning speed.

Of course, if you only develop mobile Web pages, you do not need to use jQuery. The framework is too large. You can use other lightweight mobile js frameworks.