Front-end code of Baidu map web api with the current location
<! 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">
Html {
Height: 100%;
}
Body {
Height: 100%;
Margin: 0px;
Padding: 0px;
}
# Container {
Height: 50%;
}
</Style>
<Script src = "http://code.jquery.com/jquery-1.11.0.min.js"> </script>
<Script src = "http://api.map.baidu.com/api? V = 1.4 "type =" text/javascript "> </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; // longitude
Var currentLon = position. coords. longpolling; // latitude
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 ("container"); // instantiate the container
Map. addControl (new BMap. NavigationControl (); // The Pan zoom control.
Map. addControl (new BMap. ScaleControl (); // scale control
Map. addControl (new BMap. OverviewMapControl (); // thumbnail map control
Map. centerAndZoom (point, 15); // map initialization, parameter map coordinates and levels
Map. addOverlay (new BMap. Marker (point); // mark the current position
Var myZoomCtrl = new ZoomControl ();
Map. addControl (myZoomCtrl );
Function ZoomControl (){
This. defaultAnchor = BMAP_ANCHOR_TOP_LEFT; // adjust the position of the control.
This. defaultOffset = new BMap. Size (10, 10); // adjust the position by Pixel
}
// Custom control, click two to zoom in
ZoomControl. prototype = new BMap. Control ();
ZoomControl. prototype. initialize = function (map ){
Var div = document. createElement ("div ");
Div. appendChild (document. createTextNode ("zoom in 2 "));
Div. style. cursor = "pointer ";
Div. style. border = "1px solid gray ";
Div. style. backgroundColor = "white ";
Div. onclick = function (e ){
Map. zoomTo (map. getZoom () + 2 );
}
Map. getContainer (). appendChild (div );
Return div;
}
}
</Script>
</Head>
<Body>
<Div id = "container"> </div>
</Body>
</Html>
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
