百度地图(HTML5新特性)-全面详解（学习总结---从入门到深化）
目錄
百度地圖_賬號和獲取密鑰
百度地圖_初始化?
?百度地圖_變更地圖類型
?百度地圖_添加控件
?百度地圖_改變控件位置
?百度地圖_添加覆蓋物
百度地圖_自定義標注圖標?
?百度地圖_添加文本標注
百度地圖_正/逆地址解析?
百度地圖_信息窗口
百度地圖_規劃駕車路線?
百度地圖_規劃公交路線?
百度地圖_規劃步行路線?
?百度地圖_定位
百度地圖_自定義視角動畫?
百度地圖_賬號和獲取密鑰
百度地圖提供了一套由JavaScript語言編寫的應用程序接口，該套接 口目前最新版本為 JavaScript API GL v1.0 。
使用這些接口我們就可以在頁面上構建功能豐富、交互性強的地圖應用。
接口使用方法：
? ? ?1 注冊百度賬號 https://lbsyun.baidu.com/
? ? ?2 申請成為百度開發者?
?
?
?
?
?3、獲取服務密鑰
?4、使用服務相關功能
1.下列描述錯誤的是：?使用百度地圖的接口不需要密鑰
百度地圖_初始化?
?1、引用百度地圖API文件
<script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=你的密鑰"></script>2、創建地圖容器元素
<div id="container"></div>3、創建地圖實例，其參數可以是元素id也可以是元素對象
var map = new BMapGL.Map("container");4、設置中心點坐標
var point = new BMapGL.Point(116.404,39.915); //第一個參數為經度，第二個參數為緯度5、地圖初始化，同時設置地圖展示級別，地圖展示級別范圍（1- 21）
map.centerAndZoom(point, 15); //第一個參數為中心點坐標，第二個參數為地圖級別6、開啟鼠標滾輪縮放
map.enableScrollWheelZoom(true); //開啟鼠標 滾輪縮放
1.使用哪個方法生成百度地圖實例：?new BMapGL.Map()
?百度地圖_變更地圖類型
var map = new BMapGL.Map('container')//生成地圖實例var centerPoint=new BMapGL.Point(116.404, 39.915)//設置地圖的中心點map.centerAndZoom(centerPoint,1)//初始化地圖map.enableScrollWheelZoom(true)//開啟鼠標滾輪縮放map.setMapType(BMAP_EARTH_MAP)//設置地圖類型為地球1.使用哪個方法變更地圖類型：map.setMapType
?百度地圖_添加控件
?控件是負責與地圖交互的UI元素，百度地圖API支持 比例尺、縮放、定位、城市選擇列表、版權 。
1、完成地圖初始化
2、添加控件， map.addControl(控件實例)
? ? ? 2.1、添加比例尺控件
? ? ??
var scaleCtrl = new BMapGL.ScaleControl(); // 實例化比例尺控件 map.addControl(scaleCtrl);//添加比例尺控件? ?2.2、添加縮放控件
? ? ??
var zoomCtrl = new BMapGL.ZoomControl(); //實例化控件 map.addControl(zoomCtrl);// 添加縮放控件?2.3、添加城市列表控件
var cityCtrl = new BMapGL.CityListControl(); //實例化控件 map.addControl(cityCtrl);// 添加城市列表控件?2.4、添加定位控件
var locationCtrl=new BMapGL.LocationControl()//實例化控件 map.addControl(locationCtrl)//添加定位控件
?1.使用哪個方法可以添加縮放控件：map.addControl(new BMapGL.ZoomControl())
?百度地圖_改變控件位置
1、控制控件位置
初始化控件時，可提供一個可選參數，是一個json對象，里面有 個屬性 anchor 表示控件的停靠位置，即控件?？吭诘貓D的哪個 角。當地圖尺寸發生變化時，控件會根據?？课恢玫牟煌瑏碚{整 自己的位置。
?
var scaleCtrl= new BMapGL.ScaleControl({anchor:BMAP_ANCHOR_TOP_LEFT}) //實例化控件的時候可以傳遞一個可選參數，為一個 json map.addControl(scaleCtrl)2、控件位置偏移
除了指定停靠位置外，還可以通過偏移量來指示控件距離地圖邊界有多少像素。
通過 offset 設置。
var scaleCtrl= new BMapGL.ScaleControl({anchor:BMAP_ANCHOR_TOP_RIGHT,//offset為一個Size的實例，接受的倆個參數分別代表水平方向距離跟垂直方向距離offset:new BMapGL.Size(10,10)})map.addControl(scaleCtrl)//添加比例尺控件1.用哪個屬性設置控件跟地圖邊界的偏移量：offset
?百度地圖_添加覆蓋物
所有疊加或覆蓋到地圖的內容，我們統稱為地圖覆蓋物。
1、添加覆蓋物： map.addOverlay(覆蓋物實例)
? ?1.1、添加點（標注點）使用的類： Marker
var point = new BMapGL.Point(116.404,39.915); var marker = new BMapGL.Marker(point); // 創建標注點 map.addOverlay(marker);// 將標注添加到地圖中? ?1.2、添加多邊形
? ??使用的類： Polygon
? ? ?
var polygon = new BMapGL.Polygon([new BMapGL.Point(116.387112,39.920977),new BMapGL.Point(116.385243,39.913063),new BMapGL.Point(116.394226,39.917988),new BMapGL.Point(116.401772,39.921364),new BMapGL.Point(116.41248,39.927893)], {strokeColor:"blue",strokeWeight:2, strokeOpacity:0.5});map.addOverlay(polygon);2、刪除覆蓋物： map.removeOverlay(具體覆蓋物實例) 或者 map.clearOverlays()
var overlays = map.getOverlays()//獲取地圖的所有覆蓋物 map.removeOverlay(overlays[0])//刪除對應的覆蓋物 //map.clearOverlays()//刪除地圖上所有的覆蓋物3、監聽覆蓋物事件
overlay.addEventListener('事件名稱'，callback)marker.addEventListener("click", function(e){ console.log(e) });1.使用哪個類創建標注點：Marker
百度地圖_自定義標注圖標?
1、百度地圖_自定義標注圖標
Icon(url: String, size: Size , opts: IconOptions)
var myIcon = new BMapGL.Icon("markers.png",new BMapGL.Size(50, 50), //指定放置圖標區域的大小{ //指定地理點跟圖標左上角的相對偏移量anchor: new BMapGL.Size(10, 25),
});
2、使用自定義的標注圖標創建標注點
// 創建標注對象并添加到地圖
var marker = new BMapGL.Marker(point, { icon: myIcon });
map.addOverlay(marker);1.下列說法錯誤的是：自定義圖標之后，地圖上標注點就會直接顯示自定義的圖標
?百度地圖_添加文本標注
1、添加文本標注
使用的類： Label
var point = new BMapGL.Point(116.404,39.915); var content = "label"; var label = new BMapGL.Label(content, { //創建文本標注position: point, // 設置標注的地理位置offset: new BMapGL.Size(10, 20) // 設置標注的偏移量 }) map.addOverlay(label);2、修改文本標注的樣式
label.setStyle({ // 設置label的樣式color: '#000',fontSize: '30px',border: '2px solid #1E90FF' })1.下列說法錯誤的是：添加的文本標注不能監聽鼠標的點擊事件
百度地圖_正/逆地址解析?
Geocoder.getLocation(Point,callback)1、獲取地址解析器
new BMapGL.Geocoder()2、使用地址解析器
? ? ? 地址解析：根據地址描述獲得該位置的地理經緯度坐標
Geocoder.getPoint(具體地址,callback)// 創建地址解析器實例 var geocoder = new BMapGL.Geocoder() //通過具體地址獲得該地址對應的地理位置的經緯度坐標，并進行使用 geocoder.getPoint('北京市清華大學',function(p){console.log(p)map.centerAndZoom(p,15)var marker=new BMapGL.Marker(p)map.addOverlay(marker) },'北京市')在調用 Geocoder.getPoint() 方法時您需要提供地址解析所在的城市。
逆地址解析：根據經緯度坐標點獲得該地點的地址描述
map.addEventListener('click',function(e){console.log(e)//根據地理經緯度坐標獲取具體地址信息geocoder.getLocation(e.latlng,function(result){console.log(result)})})
百度地圖_信息窗口
?1、使用的類： InfoWindow
map.addEventListener('click', function(e) {geocoder.getLocation(e.latlng,function (result) {var str='當前地址為：'+result.address//實例化信息窗口var infowindow = new BMapGL.InfoWindow(str, {width: 100,//信息窗口寬度height: 50,//信息窗口高度title: '提示'//信息窗口標題})// 在地圖上打開信息窗口map.openInfoWindow(infowindow,e.latlng)})})同一時刻只能有一個信息窗口在地圖上打開
百度地圖_規劃駕車路線?
?1、創建駕車導航實例
DrivingRoute(location,options)2、使用實例發起檢索
DrivingRoute.search(start,end)
// 創建駕車導航的實例var driving = new BMapGL.DrivingRoute(map,{ //設置結果呈現renderOptions: { map: map, autoViewport: true },//檢索完成后的回調函數onSearchComplete: function (result) {console.log(result)}})//獲取地址解析器var geocoder = new BMapGL.Geocoder()var startPoint, endPoint;document.querySelector('#start').onblur = function (e) {// 獲取起點的坐標geocoder.getPoint(e.target.value, function (p) {startPoint = p})}document.querySelector('#end').onblur = function (e) {//獲取終點的坐標geocoder.getPoint(e.target.value,function (p) {endPoint = p})}document.querySelector('#search').onclick = function () {//發起檢索driving.search(startPoint,endPoint)}
?1.下列哪個寫法可以發起路線的檢索：DrivingRoute.search()
百度地圖_規劃公交路線?
1、創建公交導航實例?
TransitRoute(location,options)2、使用實例發起檢索
TransitRoute.search(start,end)
?
//創建公交導航實例var transit = new BMapGL.TransitRoute(map, {renderOptions: { map: map },onSearchComplete: function (result) {// 獲取第一個計劃var plan = result.getPlan(0)var distance = plan.getDistance(true)var duration = plan.getDuration(true)document.querySelector('.result').innerHTML = '總路程為：' + distance + '；預計花費' + duration}})//獲取地址解析器var geocoder = new BMapGL.Geocoder()var startPoint, endPoint;document.querySelector('#start').onblur = function (e) {// 獲取起點的坐標geocoder.getPoint(e.target.value, function (p) {startPoint = p})}document.querySelector('#end').onblur = function (e) {//獲取終點的坐標geocoder.getPoint(e.target.value,function (p) {endPoint = p})}document.querySelector('#search').onclick = function () {//發起檢索transit.search(startPoint,endPoint)}1.路線檢索成功后回調函數是：onSearchComplete
百度地圖_規劃步行路線?
?1、創建步行導航實例
WalkingRoute(location,options)2、使用實例發起檢索
//創建步行導航實例var walking = new BMapGL.WalkingRoute(map, {renderOptions: { map: map },onSearchComplete: function (result) {// 獲取第一個計劃var plan = result.getPlan(0)var distance = plan.getDistance(true)var duration = plan.getDuration(true)document.querySelector('.result').innerHTML = '總路程為：' + distance + '；預計花費' + duration}})//獲取地址解析器var geocoder = new BMapGL.Geocoder()var startPoint, endPoint;document.querySelector('#start').onblur = function (e) {// 獲取起點的坐標geocoder.getPoint(e.target.value, function (p) {startPoint = p})}document.querySelector('#end').onblur = function (e) {//獲取終點的坐標geocoder.getPoint(e.target.value, function(p) {endPoint = p})}document.querySelector('#search').onclick = function () {//發起檢索walking.search(startPoint,endPoint)}1.檢索步行路線使用：WalkingRoute.search()
?百度地圖_定位
1、瀏覽器定位：優先調用瀏覽器H5定位接口，如果失敗會調用IP 定位
? ? ? 使用的類： Geolocation
? ? ??
// 創建定位實例var geolocation = new BMapGL.Geolocation();//獲取定位并傳遞回調函數geolocation.getCurrentPosition(function(r) {console.log(r)//判斷返回的狀態碼是否為成功if (geolocation.getStatus() == BMAP_STATUS_SUCCESS) {var mk = new BMapGL.Marker(r.point);map.addOverlay(mk);//將地圖的中心改為指定的點map.panTo(r.point);alert('您的位置：' + r.point.lng + ',' + r.point.lat);}else {alert('失敗' + geolocation.getStatus());}});2、IP定位：根據用戶IP 返回城市級別的定位結果
? ? ?使用的類： LocalCity
? ? ?
//創建ip定位實例var myCity = new BMapGL.LocalCity();myCity.get(function(result){var cityName = result.name;//設置地圖中心點，參數除了可以為坐標點以外，還支持城市名map.setCenter(cityName);console.log("當前定位城市:" + cityName);});1.通過IP定位使用：Geolocation
百度地圖_自定義視角動畫?
?您可以自定義從地圖上某一地點切換到另一地點的3D過渡動畫效果。
?1、初始化地圖
?2、自定義關鍵幀
var keyFrames = [{center: new BMapGL.Point(116.40396298757886,39.91511908708907), // 定義第一個關鍵幀幀地圖中心點zoom: 18, // 定義第一個關鍵幀地圖等級tilt: 60, // 定義第一個關鍵幀地圖傾斜角度heading: 0, // 定義第一個關鍵幀地圖旋轉方向percentage: 0 // 定義第一個關鍵幀處于動畫過程的百分比，取值范圍0~1},{center: new BMapGL.Point(116.38096834279554,39.9156803086881), // 定義第二個關鍵幀地圖中心點zoom: 18, // 定義第二個關鍵幀地圖等級tilt: 60, // 定義第二個關鍵幀地圖傾斜角度heading: 0, // 定義第二個關鍵幀地圖旋轉方向percentage: 1 // 定義第二個關鍵幀處于動畫過程的百分比，取值范圍0~1},];3、設置動畫屬性
var opts = {duration: 10000, // 設置每次迭代動畫持續時間delay: 3000, // 設置動畫延遲開始時間interation: 1 // 設置動畫迭代次數 };4、創建動畫實例
var animation = new BMapGL.ViewAnimation(keyFrames, opts);5、播放動畫
map.startViewAnimation(animation); //傳入動畫實例6、強制停止動畫
map.cancelViewAnimation(animation); // 強制停止動畫
總結
以上是生活随笔為你收集整理的百度地图(HTML5新特性)-全面详解（学习总结---从入门到深化）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CF1270H Number of Co
- 下一篇： 中望3D 2021 合并面