首先得申請一個秘鑰，步驟如下：
1.百度搜索“ 百度地圖開放平台”。
2.然后填寫賬號登錄，沒有賬號就注冊一個，非常簡單沒什么可說的。
3.選擇“我的應用”然后創建一個應用。
我們是網頁調用，類型默認選服務器瀏覽器都行，有很多服務默認勾選的一般都足夠我們使用了。填完之后提交。
4.然后查看我的應用，復制你的AK。
5.在你的jsp或者html引入鏈接，就可以調用百度地圖接口了。
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=秘鑰"></script>
//直接訪問一下可以看到返回了一堆js。
6.示例。
<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{width: 100%;height: 100%;margin:0;font-family:"微軟雅黑";} #allmap{height:600px;width:1200px;} #r-result{width:100%; font-size:14px;} </style> <!-- 設置地圖ak, api key 申請的密鑰 --> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的AK"></script> <title>百度地圖調用</title> </head> <body> <div id="allmap" ></div> <input type="button" onclick="$('#allmap div.anchorBL').hide();" value="移除地圖LOGO和版權說明(不建議使用)"/> <input type="button" onclick="addYourCopyright()" value="自定義版權說明"/> <input type="button" onclick="showSZ()" value="深圳區域輪廓"/> <input type="button" onclick="showSH()" value="切換到上海市"/> <input type="button" onclick="addWalking()" value="步行路線圖" /> <input type="button" onclick="addGeolocation()" value="定位控件" /> <input type="button" onclick="addCities()" value="城市列表控件" /> <input type="button" onclick="changeThemeDark()" value="切換顯色主題" /> <div id="r-result"> <input type="button" onclick="add_control();" value="添加縮放控件" /> <input type="button" onclick="delete_control();" value="刪除縮放控件" /> <input type="button" onclick="showOver()" value="顯示帶標注marker" /> <input type="button" onclick="hideOver()" value="隱藏帶標注marker" /> <input type="button" onclick="marker.enableDragging();" value="可拖拽" /> <input type="button" onclick="marker.disableDragging();" value="不可拖拽" /> <input type="button" onclick="showVectorMarker()" value="顯示VectorMarker" /> <input type="button" onclick="hideVectorMarker()" value="隱藏VectorMarker" /><br> <input type="button" onclick="showYourMarker()" value="顯示自定義Marker" /> <input type="button" onclick="hideYourMarker()" value="隱藏自定義Marker" /> <input type="button" onclick="addTenMarkers()" value="添加10個標注" /> <input type="button" onclick="addTenRandomMarkers()" value="隨機添加10個標注" /><br> 城市名: <input id="cityName" type="text" style="width:100px; margin-right:10px;" /> <input type="button" value="查詢" onclick="theLocation()" /> </div> </body> </html> <script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script> <script type="text/javascript"> // 百度地圖API功能 var map = new BMap.Map("allmap"); var point = new BMap.Point(120.391655,36.067588); map.centerAndZoom(point,15); // 初始化地圖,用城市名設置地圖中心點，顯示比例級別 function showSH(){map.centerAndZoom("上海",15); } function theLocation(){ var city = document.getElementById("cityName").value; if(city != ""){ map.centerAndZoom(city,15); // 用城市名設置地圖中心點，顯示比例級別 } } //設置地圖樣式 dark function changeThemeDark(){ map.setMapStyle({style : "dark" });} //鼠標滾動縮放 map.enableScrollWheelZoom(true); //行政區域輪廓 function getBoundary(){ var bdary = new BMap.Boundary(); bdary.get("北京市昌平區", function(rs){ //獲取行政區域 map.clearOverlays(); //清除地圖覆蓋物 var count = rs.boundaries.length; //行政區域的點有多少個 if (count === 0) { alert('未能獲取當前輸入行政區域'); return ; } var pointArray = []; for (var i = 0; i < count; i++) { var ply = new BMap.Polygon(rs.boundaries[i], {strokeColor:"green",fillColorOpacity:"0.1",fillOpacity: 0.1, strokeWeight:2, strokeOpacity:0.3}); //建立多邊形覆蓋物 map.addOverlay(ply); //添加覆蓋物 pointArray = pointArray.concat(ply.getPath()); } map.setViewport(pointArray); //調整視野 addlabel(); }); } //深圳行政區域輪廓 function showSZ(){ getBoundary(); } //setTimeout(function(){ // getBoundary(); //}, 2000); //百度地圖級別有19級，級別 比例尺 // 19級 20m // 18級 50m // 17級 100m // 16級 200m // 15級 500m // 14級 1km // 13級 2km // 12級 5km // 11級 10km // 10級 20km // 9級 25km // 8級 50km // 7級 100km // 6級 200km // 5級 500km // 4級 1000km // 3級 2000km // 2級 5000km // 1級 10000km //在地圖上添加圖片文字等信息(版權控件) //Copyright(id,content,bounds)類作為CopyrightControl.addCopyright()方法的參數 var cr = new BMap.CopyrightControl({anchor: BMAP_ANCHOR_TOP_RIGHT}); //設置版權控件位置 //添加版權控件 function addYourCopyright(){map.addControl(cr); } var bs = map.getBounds(); //返回地圖可視區域 cr.addCopyright({id: 1, content: "<a href='#' style='font-size:20px;background:yellow'>我是自定義版權控件</a>", bounds: bs}); // var cr=new BMap.CopyrightControl({anchor:BMAP_ANCHOR_TOP_LEFT,offset:new BMap.Size(0,0)}); // map.addControl(cr); //cr.addCopyright({id:1,content:"<img src='banner.png' style='width:800px; height:50px' />"}); //需要更改為你的圖片地址和名稱 // 初始化地圖， 設置中心點坐標和地圖級別 //map.centerAndZoom(new BMap.Point(116.4035,39.915),15); //setTimeout(function(){ // map.setZoom(14); //}, 2000); //2秒后放大到14級 var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺 var top_left_navigation = new BMap.NavigationControl(); //左上角，添加默認縮放平移控件 var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角，僅包含平移和縮放按鈕 /*縮放控件type有四種類型: BMAP_NAVIGATION_CONTROL_SMALL：僅包含平移和縮放按鈕；BMAP_NAVIGATION_CONTROL_PAN:僅包含平移按鈕；BMAP_NAVIGATION_CONTROL_ZOOM：僅包含縮放按鈕*/ //添加控件和比例尺 function add_control(){ map.addControl(top_left_control); map.addControl(top_left_navigation); map.addControl(top_right_navigation); } //移除控件和比例尺 function delete_control(){ map.removeControl(top_left_control); map.removeControl(top_left_navigation); map.removeControl(top_right_navigation); } // 添加定位控件 var geolocationControl = new BMap.GeolocationControl(); geolocationControl.addEventListener("locationSuccess", function(e){ // 定位成功事件 var address = ''; address += e.addressComponent.province; address += e.addressComponent.city; address += e.addressComponent.district; address += e.addressComponent.street; address += e.addressComponent.streetNumber; alert("當前定位地址為：" + address); }); geolocationControl.addEventListener("locationError",function(e){ // 定位失敗事件 alert(e.message); }); //添加定位到地圖 function addGeolocation(){map.addControl(geolocationControl);} //城市列表 function addCities(){ var size = new BMap.Size(10, 20); map.addControl(new BMap.CityListControl({ anchor: BMAP_ANCHOR_TOP_LEFT, offset: size, // 切換城市之間事件 // onChangeBefore: function(){ // alert('before'); // }, // 切換城市之后事件 // onChangeAfter:function(){ // alert('after'); // }http://localhost:8082/index.jsp })); } var marker = new BMap.Marker(new BMap.Point(114.04254,22.561866)); // 創建點 map.addOverlay(marker); //marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳動的動畫 marker.disableDragging();// 不可拖拽 //獲取marker的位置 marker.addEventListener("click",getAttr); function getAttr(){ var p = marker.getPosition(); //獲取marker的位置 alert("marker的位置是" + p.lng + "," + p.lat); } //創建小狐狸 var pt = new BMap.Point(114.04111,22.561744); var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/fox.gif", new BMap.Size(300,157)); var marker2 = new BMap.Marker(pt,{icon:myIcon}); // 創建標注 // 將標注添加到地圖中 map.addOverlay(marker2); marker2.hide(); function showYourMarker(){marker2.show();} function hideYourMarker(){marker2.hide();} var marker3 = new BMap.Marker(new BMap.Point(114.04000,22.561600)); // 創建標注 map.addOverlay(marker3); var label = new BMap.Label("我是文字標注哦",{offset:new BMap.Size(20,-10)}); marker3.setLabel(label); marker3.hide(); function showOver(){ marker3.show(); } function hideOver(){ marker3.hide(); } // 編寫自定義函數,創建標注 function addMarker(point){ var marker = new BMap.Marker(point); map.addOverlay(marker); } // 隨機向地圖添加10個標注 function addTenRandomMarkers(){ var bounds = map.getBounds(); var sw = bounds.getSouthWest(); var ne = bounds.getNorthEast(); var lngSpan = Math.abs(sw.lng - ne.lng); var latSpan = Math.abs(ne.lat - sw.lat); for (var i = 0; i < 10; i ++) { var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7)); addMarker(point); } } // 向地圖添加10個標注 function addTenMarkers(){ var longS = 114.04554; var latS = 22.561666; for (var i = 0; i < 10; i ++) { var point = new BMap.Point(longS + 0.001*i, latS + 0.0001*i); addMarker(point); } } //設置marker圖標為水滴矢量圖標 var vectorMarker = new BMap.Marker(new BMap.Point(point.lng,point.lat-0.0003), { // 指定Marker的icon屬性為Symbol icon: new BMap.Symbol(BMap_Symbol_SHAPE_POINT, { scale: 1.2,//圖標縮放大小 fillColor: "blue",//填充顏色 fillOpacity: 0.8//填充透明度 }) }); map.addOverlay(vectorMarker); vectorMarker.hide(); function showVectorMarker(){vectorMarker.show();} function hideVectorMarker(){vectorMarker.hide();} vectorMarker.enableDragging();// 可拖拽 //獲取marker的位置 vectorMarker.addEventListener("click",getAttr); function getAttr(){ var p = vectorMarker.getPosition(); //獲取vectorMarker的位置 alert("vectorMarker的位置是" + p.lng + "," + p.lat); } //步行線路圖 var walking = new BMap.WalkingRoute(map, { renderOptions: { map: map, autoViewport: true } }); var start = new BMap.Point(114.038143,22.547901); var end = new BMap.Point(114.053495,22.548226); function addWalking(){ walking.search(start, end);} </script>
常用的一些功能介紹可以看這里:
http://lbsyun.baidu.com/jsdemo.htm
也可以看官方文檔很全面，如下：
