Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to use html5 positioning to obtain the current location and display it on Baidu map. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

The code is as follows:

Navigator.geolocation.getCurrentPosition (callback)

After successfully obtaining the coordinates, the callback function callback; callback method is executed. The parameters of the callback function are the obtained coordinate points. Then you can initialize the map, set the control, center point, and zoom level, and then add the overlay of point to the map:

Var map = new BMap.Map ("mapDiv"); / / mapDiv is the id of the div that put the map

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 results shown are not accurate. This is because the coordinates obtained by getCurrentPosition are GPS longitude and latitude coordinates, while the coordinates of Baidu map are specially converted, so one-step coordinate conversion is needed between obtaining positioning coordinates and initializing the map. This conversion method is already provided in Baidu API. Methods for converting a point or batch replacement are provided: http://developer.baidu.com/map/jsdemo/demo/convertor.js is required for single point conversion, and http://developer.baidu.com/map/jsdemo/demo/changeMore.js is required for batch conversion. Here, only the former is needed:

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

/ / gpsPoint: coordinates before conversion. The second parameter is the conversion method. 0 indicates that gps coordinates are converted to Baidu coordinates, callback callback function, and the parameter is the new coordinate point.

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

* {

Height: 100%; / / set the height, otherwise it will not be displayed

}

$(function () {)

Navigator.geolocation.getCurrentPosition (translatePoint); / / location

});

Function translatePoint (position) {

Var currentLat = position.coords.latitude

Var currentLon = position.coords.longitude

Var gpsPoint = new BMap.Point (currentLon, currentLat)

BMap.Convertor.translate (gpsPoint, 0, initMap); / / convert coordinates

}

Function initMap (point) {

/ / initialize the map

Map = new BMap.Map ("map")

Map.addControl (new BMap.NavigationControl ())

Map.addControl (new BMap.ScaleControl ())

Map.addControl (new BMap.OverviewMapControl ())

Map.centerAndZoom (point, 15)

Map.addOverlay (new BMap.Marker (point))

}

This is the end of the article on "how to use html5 location to get the current location and display it on Baidu map". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.