Overview
Readers need to apply for a key before using the Baidu maps API, and readers can click here to read a detailed tutorial on the Baidu map JavaScript API.
Baidu map JavaScript API syntax
The syntax for Web development is JavaScript.
JavaScript class Reference
Click I read the JavaScript class reference.
A simple map Demo
<!DOCTYPE HTML><HTML> <Head> <title>Demo</title> <Metaname= "Content-type"content= "text/html; charset=utf-8"> <!--In order to better support the mobile terminal - <Metaname= "Viewport"content= "initial-scale=1.0, User-scalable=no" /> <!--reference Baidu Map API JS - <Scriptsrc= "HTTP://API.MAP.BAIDU.COM/API?V=2.0&AK=UFUZJKLXJF6BMZVIIDW9C5HJDGVTO9BW"></Script> </Head> <Body> <!--must set width and height - <DivID= "Container"style= "width:70%;height:400px"></Div> <Script> //Create Map varMap=NewBmap.map ("Container"); //Initialize Map varpoint1=NewBmap.point (104.074091,30.665783); Map.centerandzoom (Point1, A); //add marker on map varPoint2=NewBmap.point (104.158603,30.642172); varMarker=NewBmap.marker (Point2); Map.addoverlay (marker); //Addpanoramaconveragelayer on Map varPclyer=NewBmap.panoramacoveragelayer (); Map.addtilelayer (Pclyer); //add Panoramacontrol on map varPNRM=NewBmap.panoramacontrol (); Map.addcontrol (PNRM); //add Overviewcontrol on map varOverviewcontrol= NewBmap.overviewmapcontrol ({anchor:bmap_anchor_bottom_right,isopen:true}); Map.addcontrol (Overviewcontrol); </Script> </Body></HTML>
Summarize:
- Your own keys can be viewed in the API console.
- BMap is the namespace for the entire JavaScript API, and all JavaScript API classes must be preceded by the "BMap.", which requires a different namespace to refer to a class other than the JavaScript API.
- Most classes in the JavaScript API have listener events, so you can listen through AddEventListener ():
Map.addeventlistener ("click", Function (e) { console.log (e.point.lng+ "," +e.point.lat);});
- The function arguments in AddEventListener () can have the following properties:
- E.point.lng
- E.point.lat
- E.pixel.x
- E.pixel.y
- E.bounds
- E.size
"Baidu Map" analysis of how to use Baidu map