Baidu Map API Of course in the Official document learning more clearly, I just do a summary of my 2-day study.
First, you should request one of your keys on the link above.
Then, show Baidu Map, the first code again explained:
1<! DOCTYPE html>234<meta name= "viewport" content= "initial-scale=1.0, User-scalable=no"/>5<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>6<title>hello, world</title>7<style type= "Text/css" >8html{height:100%} 9body{height:100%; margin:0px;padding:0px}Ten#container {height:100%} One</style> A<script type= "Text/javascript" src= "http://api.map.baidu.com/api?v=2.0&ak= VJXRK3M3YYQ4UGLEXLROXEVWGC2NW6KF "> - //v2.0 version reference: src= "http://api.map.baidu.com/api?v=2.0&ak= your Key" - //v1.4 version and previous version of reference: Src= "http://api.map.baidu.com/api?v=1.4&key= your key &callback=initialize" the</script> - - -<body> +<div id= "Container" ></div> -<script type= "Text/javascript" > + varMap =NewBmap.map ("container");//Create a Map instance A varPoint =NewBmap.point (116.401,41.915);//Create point coordinates atMap.centerandzoom (Point, 15);//initialize map, set center point coordinates and map level -</script> -</body> -var map=New bmap.map (' container ');
Create a Map instance
<style type= "TEXT/CSS" > html{height:100%} body{height :100%; margin:0px; padding:0px} #container{height:100%}
Here, you create a map instance, where the parameter can be an ID or an element object, to show the map on the page, so the HTML element is styled so that the map fills the entire browser window.
var point=New bmap.point (116.404,39.915);
We create a coordinate point by bmap the dot class under the namespace. 116.404 means longitude, and 39.915 is latitude.
Map.centerandzoom (point,15);
To initialize the map, the BMap.Map.centerAndZoom () method requires 2 parameters, a center point, and a map level. The next action on the map occurs only after the initialization has been initiated.
Adding controls// control parameter set size type var opts={offset:new bmap.size (400,400), type:bmap_navigation_control_zoom}// Add control Map.addcontrol (new Bmap.navigationcontrol (opts));//Map Pan zoom control Map.addcontrol ( New Bmap.overviewmapcontrol ()); thumbnail map control map.addcontrol (new Bmap.scalecontrol (opts)); Scale Control
control type, control location, and control configuration please see Baidu Control API;Custom controls:
8 //Custom Controls9 functionSelfcontroll () {Ten This. defaultanchor=Bmap_anchor_top_right; One This. defaultoffset=NewBmap.size (200,200); A } -Selfcontroll.prototype=NewBmap.control (); -Selfcontroll.prototype.initialize=function(map) { theDiv=document.createelement ("div"); -Div.appendchild (document.createTextNode ("Zoom Level 2")); -Div.style.cursor= ' pointer '; -Div.style.backgroundcolor= ' Red '; +div.onclick=function(e) { -Map.zoomto (Map.getzoom () +2); + } A //Map.getcontainer (). ID--Return container at Map.getcontainer (). appendchild (div); - returnDiv; - } - varSelfcontroll=NewSelfcontroll (); -Map.addcontrol (Selfcontroll);1, define a custom constructor. 2, set the prototype property of the custom control constructor to the instance of control so that the control base class is inherited. 3, implement the Initialize () method. 4, instance a custom control that is added to the map.
Add OverlayOverlays: All overlays or overlays to the map, collectively referred to as map overlays.
Map-focused overlays:
Overlay: The abstract base class of the covering, all of which inherit the method of this class.
Marker: The callout represents a point on the map, and you can customize the icon for the callout.
Label: Represents a text callout on a map, and you can customize the text content of the callout.
Polyline: Represents a polyline on a map.
Polygon: Represents a polygon on a map. Polygons are similar to closed polylines, and you can also add fill colors to them.
Circle: Represents a circle on a map.
Infowindow: Information window is also a special covering, it can display more rich text and multimedia information. Note: Only one information window can be opened on the map at the same time.
Add a calloutvar marker=New bmap.marker (point); Map.addoverlay (marker);
The red one is the default label.
Add polyline// Add polyline var New bmap.polyline ([ new bmap.point (116.399, 39.910), new Bmap.point ( 116.405, 39.920) ], {strokecolor:"Blue", Strokeweight:6, strokeopacity:0.5} ); Map.addoverlay (polyline);
Polyline represents a polyline overlay on a map. It contains a set of points and joins them together to form a polyline.
Add Information classvar opts1={ width:+, height:+, title:' Hello ' } var infowindow=New Bmap.infowindow (' World ', opts1); Map.openinfowindow (Infowindow,map.getcenter ());
Use Infowindow to create an instance of an information window with only one information window open on a map
Event MonitoringMost of the objects in the Baidu Map API contain AddEventListener, which can be used to listen to object events
Click on the map to trigger the event:
var New Bmap.map ("container"); Map.centerandzoom (new bmap.point (116.404, 39.915), one by one); Map.addeventlistener (function() { alert ("You clicked on the map. "); });
When you drag a map post event:
var New Bmap.map ("container"); Map.centerandzoom (new bmap.point (116.404, 39.915), one by one); Map.addeventlistener (function() { var center = Map.getcenter (); Alert ("Map Center point changed to:" + center.lng + "," + Center.lat); })
When the map is scaled back to the event,
var New Bmap.map ("container"); Map.centerandzoom (new bmap.point (116.404, 39.915), one by one); Map.addeventlistener (function() { alert (this. Getzoom () + "level"); });
removing eventsEach API object provides removeeventlistener to remove the event listener function
var New Bmap.map ("container"); Map.centerandzoom (new bmap.point (116.404, 39.915), one by one); function Showinfo (e) { + "," + E.point.lat); Map.removeeventlistener ("click", Showinfo); } Map.addeventlistener ("click", Showinfo);
The first time the user clicks on the map triggers an event listener function, which removes the event listener within the function, so subsequent clicks do not trigger the listener function.
Baidu Map API
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
