recently in a project, including project has a demand to use baidu map navigation, by consulting relevant data refer to baidu map API finished a case in point.

example 1:

API address:

<! DOCTYPE html><Html><Head><Meta HTTP - equiv="content-type" Content="text/HTML; charset=utf-8"/><Meta name="viewport" content="initial - scale=1.0, user - scalable=no"/><Style type="text/CSS" >Body, HTML, #allmap {width: 100%; Height: 100%; Overflow: hidden; Margin: 0; The font-family: "Microsoft jas black"; }</style><! - the call API, baidu ><The script type="text/javascript" SRC=" key" ></script><Title> Maps show </title></head><Body><Div id="allmap" ></div></body></html><The script type="text/javascript" >//baidu map API functionsVar map=new BMap. The map (" allmap ");//create the Map instanceMap. CenterAndZoom (" xian ", 5);//initializes the map, use city name set the center of the mapMap. AddControl (new BMap. MapTypeControl ());//add the map type controlMap. SetCurrentCity (" shenzhen ");//set the map shows the city This is must be setMap. EnableScrollWheelZoom (true);//open the mouse wheel zoomVar point=new BMap. Point (116.404, 39.915);Var marker=new BMap. Marker (point);//create a pointThe map. The addOverlay (marker);//add someMap. RemoveOverlay (marker);//delete some//create address parser instanceVar myGeo=new BMap. Geocoder ();//batch parsingVar adds=[" changsha ", "shenzhen", "Hong Kong", "zhengzhou", "huizhou", "nanchang", "ganzhou", "zhongshan", "yangjiang", "Shanghai", "wuxi", "nanjing"].For (var I=0; I <adds. Length; i++) {MyGeo. GetPoint (adds [I], function (point) {{if (point)Var address=new BMap. Point (Point. LNG, Point. Lat);Var marker=new BMap. Marker (address);The map. The addOverlay (marker);Var opts={Width: 120,//information window widthHeight: 70,//information window heightTitle: "project information"//information window title}Var infoWindow=new BMap. InfoWindow (" <a href="" target="blank" >check the details </a> ", opts);//create information window objectMarker. AddEventListener (" click ", function () {Map. OpenInfoWindow (infoWindow, address);//open the info window});}}, "shenzhen");}GetBoundary (" China ");The function getBoundary (sRegion) {Var bdary=new BMap. A Boundary ();Bdary. Get (sRegion, function (rs) {//for administrative areasVar count=rs. Boundaries. Length;//how many letters are there in the administrative region of the pointFor (var I=0; I <count; i++) {Var ply=new BMap. Polygon (rs. Boundaries [I] and {strokeWeight: 2, strokeColor: "#4 a7300 fillColor:" #FFF8DC} ");//polygon overlay is establishedThe map. The addOverlay (ply);//add mulch}});}</script> 

  Results are as follows:

example 2:

baidu map API is written by the JavaScript language, need before use the API reference to the page:   Now the new version of the need to key, below is the old version of

<Script SRC=" &services=true or false" type="text/javascript" ></script>

display guangzhou railway station simple example:

<! DOCTYPE html><Html><Head><Meta charset="utf-8"/><Title> The use of baidu map API </title><! - baidu map API, ><Script SRC="" type="text/javascript" ></script><The script type="text/javascript" >The function the initialize () {//create a map instanceVar map=new BMap. The map (" map ");//create a coordinateVar point=new BMap. Point (113.264641, 23.154905);//map initialization, set up center coordinates and the level of mapMap. CenterAndZoom (point, 15);}Window. The onload=the initialize;</script></head><Body><! - baidu map map containers - ><Div id="map" style="width: 500px; height: 320px" ></div></body></html> 

Add controls:


add controls

map. AddControl (new BMap MapTypeControl ());

MapTypeControl -- -- -- -- -- -- -- -- -- the map type control

CopyrightControl -- -- -- -- -- -- -- -- copyright control

ScaleControl            -- -- -- -- -- -- -- --

scale control

NavigationControl  -- -- -- -- -- - zoom control

OverviewMapControl  - the thumbnail controls

create annotation:

Var marker=new BMap. Marker (point);//create annotationThe map. The addOverlay (marker);//add annotation to the map 

create information window:

Var infoWindow=new BMap. InfoWindow (" I am here ");//create information window objectMap. OpenInfoWindow (infoWindow, point);//open the info window 

offset baidu map:

correction: longitude 0.008774687519;

latitude correction: 0.00374531687912;

This concludes the body part