Comment: This article mainly introduces the example of html5 positioning and displaying it on Baidu map. Friends who need it can refer to it.
When developing mobile web or webapps, when using Baidu Map API, you often need to obtain the current location through mobile phone positioning and display it in the center on the map, which requires the use of the geolocation function of html5.
navigator.geolocation.getCurrentPosition(callback);
After the coordinates are successfully obtained, the callback function callback will be executed; the parameter of the callback method is the obtained coordinate points; then the map can be initialized, the controls, center points, and zoom levels can be set, and then the overlay of point is added to the map:
var map = new BMap.Map("mapDiv");//mapDiv is the id of the div that puts 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, 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 latitude and longitude coordinates, and the coordinates of Baidu map are specially converted. Therefore, a step of coordinate conversion is required between obtaining positioning coordinates and initializing the map. This conversion method is already provided in Baidu API. The method of converting a point or batch replacement is provided: a single point conversion requires reference, and a batch conversion requires reference. Here, only the former is needed:
BMap.Convertor.translate(gpsPoint, 0, callback);
//gpsPoint: The coordinates before conversion, the second parameter is the conversion method, 0 means that the gps coordinate is converted into Baidu coordinates, the callback function, the parameter is the new coordinate point
The detailed code of the example is as follows: (The ak in the quote is the key applied for)
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
*{
height: 100%; //Set the height, otherwise it will not be displayed
}
</style>
<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>
<script>
$(function(){
navigator.geolocation.getCurrentPosition(translatePoint); //Positioning
});
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))
}
</script>
</head>
<body>
<div></div>
</body>
</html>
During the development process, I feel that the computer positioning speed is a bit slow, and I often cannot obtain coordinates, so the map cannot be displayed. It is recommended to use a mobile phone to test it, and the positioning is faster.
Of course, if you only develop mobile web pages, you don’t need to use jQuery. The framework is too large, you can switch to other lightweight mobile js frameworks.