HTML5 positioning gets the current location and displays it on Baidu map

Home

Web Front-end

H5 Tutorial

HTML5 positioning gets the current location and displays it on Baidu map_html5 tutorial skills

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:47 PM

html5 position Baidu map

When developing a mobile web or webapp, when using the 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 points to the map Overlay:

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, and 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 are specially converted. Therefore, a step of coordinate conversion is required between obtaining the positioning coordinates and initializing the map. This conversion method has been provided in Baidu API, and the method of converting a point or batch conversion is Both 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 the 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 coordinates Click

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

Copy code

The code is as follows:

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