Comments: This article mainly introduces the html5 positioning and display examples on Baidu map. For more information, see
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.
The Code is as follows:
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:
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 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, 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:
The Code is as follows:
BMap. Convertor. translate (gpsPoint, 0, callback );
// GpsPoint: The coordinate before the conversion. The second parameter is the conversion method. 0 indicates that the gps coordinate is converted into a hundred-degree coordinate, and the callback function. The parameter is the new coordinate point.
The sample code is as follows: (the ak in the reference is the applied key)
The Code is as follows:
<! DOCTYPE html>
<Html lang = "zh-cn">
<Head>
<Meta name = "viewport" 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 cannot 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); // locate
});
Function translatePoint (position ){
Var currentLat = position. coords. latitude;
Var currentLon = position. coords. longpolling;
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 id = "map"> </div>
</Body>
</Html>
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.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
