Html5 locates and retrieves the current location and displays it on Baidu map. html5 current location
You can use the html5 geo-positioning function to locate the current location on your mobile phone and display it in the center of the map. The following describes how to use Baidu map API, if you have any need, you can refer to the following: when developing a mobile web or webapp, when using 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.
Why can't I locate the current location and view the network configuration on the Baidu Map Display page? Xiaomi mobile phone. This is what happens after the map is upgraded,
The compatibility between Baidu maps and Xiaomi mobile phones is good. The Baidu maps on my Xiaomi mobile phone have been running very smoothly. What the landlord said should be in the room and there is no Internet connection. The problem may occur after you click the "locate" button on Baidu map. The solution is to either enable GPS outside, or enable WIFI (or data access) indoors so that Baidu maps can be located.
My Baidu map can still be located yesterday. After downloading the offline map package, it cannot be located. I can't get the current location.
First confirm that GPS is enabled and the signal is smooth
Second, confirm that the data is on and the signal is normal.
Third, confirm that the offline map is properly installed. The map file must be in the SD card/BaiduMap/vmp/h/folder.
If the problem persists, reinstall Baidu map. Make sure that the map file is in the preceding folder.
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
