百度地图 JavaScript API
文章目錄
- 1、賬號申請
- 2、創建應用
- 3、使用地圖
- 介紹
- 示例
- 4、具體使用
- 控件
- 個性地圖
- 帶高度的點（標記地點、覆蓋物）
- 點擊事件
參考資料： 入門百度地圖 JavaScript API | 8月更文挑戰 - 掘金 (juejin.cn)
今天在使用Echarts添加地圖模塊（精確到每個樓棟）遇阻塞，現將一些部分走通的小技巧分享給大家
先看一下簡單的使用效果：
1、賬號申請
先申請成為百度開發者（需要填寫身份證信息、申請理由等），創建地圖應用生成 AK。
百度地圖開放平臺 | 百度地圖API SDK | 地圖開發 (baidu.com)
一般會秒同意，所以不用擔心時間問題
2、創建應用
注意
- 應用類型選擇瀏覽器端。
- 白名單輸入*號，所有地址都可以訪問。
3、使用地圖
復制你的AK放入案例的示例代碼即可看到效果
介紹
- 在頁面使用script標簽引入
示例
-
示例代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>地圖</title><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta http-equiv="content-type" content="text/html; charset=utf-8"/><script type="text/javascript" src="./test/jquery.min.js"></script><script src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密鑰"></script><style type="text/css">html {height: 100%;}body {height: 100%;margin: 0px;padding: 0px;}#container {height: 100%;}.bmap {height: 100%;width: 100%;}</style></head> <body><!-- 百度地圖--> <div id="bmap" class="bmap"></div> <script type="text/javascript">var map = new BMapGL.Map('bmap') // 創建Map實例map.centerAndZoom('上海市', 10) // 初始化地圖,設置中心點坐標和地圖級別map.enableScrollWheelZoom(true) // 開啟鼠標滾輪縮放 </script></body> </html> -
效果展示：
4、具體使用
官網開發指南：jspopularGL | 百度地圖API SDK (baidu.com)
-
- 創建地圖
- 展示地圖
- 變更地圖類型
- 添加控件
- 個性化地圖
- 覆蓋物
- 繪制點、線、面
- 帶高度的點
- 鏤空面繪制
- 3D棱柱繪制
- 地面疊加層
- 文本標注
- 信息窗口
- 交通流量圖層
- 事件處理
- 地圖事件
- 右鍵菜單
- 動態效果
- 自定義視角動畫
- 軌跡動畫
- LBS服務
- 正/逆地址解析
- 出行路線規劃
- 定位
- 圖層服務
- 三方標準圖層
- 創建地圖
-
- 類參考
下面挑幾個常用的展示：
控件
控件是負責與地圖交互的UI元素，百度地圖API支持比例尺、縮放、定位、城市選擇列表、版權，以及自定義控件。
就是在地圖上層添加，對地圖控制的組件。如放大、縮小、平移等。官方提供了很多定義好的控件，可以直接使用。當然我們也可以自定義控件（通過DOM事件觸發函數，在函數中調用地圖api）。
- 官網文檔：jspopularGL | 百度地圖API SDK (baidu.com)
| 抽象基類 | Control | 所有控件均繼承此類的方法、屬性。通過此類您可實現自定義控件 |
| 比例尺 | ScaleControl | 默認位于地圖左下方，顯示地圖的比例關系 |
| 縮放 | ZoomControl | 默認位于地圖右下方，控制地圖級別的縮放 |
| 定位 | LocationControl | 默認位于地圖左下方，用于獲取定位 |
| 城市選擇列表 | CityListControl | 默認位于地圖左上方，用于進行城市選擇定位 |
| 版權 | CopyrightControl | 默認位于地圖左下方，用于展示版權信息 |
參考示例：
- 代碼展示
- 效果展示
- 到了這里就要提一句。百度地圖左下角的圖標，其實就是個img。要隱藏他只要找到樣式名設置隱藏就行。這里不直接對.anchorBL隱藏是因為其他控件也使用了這個樣式名。
控制控件位置等操作操作查看官方文檔
個性地圖
- 創建個性化地圖樣式
進入地圖開放平臺控制臺頁面，在我的地圖中，創建一個地圖樣式：
- 編輯樣式
點擊創建的地圖樣式，進入樣式編輯器，根據您的需求自由編輯地圖樣式：
- 發布樣式并獲取樣式ID
完成編輯后，在我的地圖或者編輯器中發布該地圖樣式，獲取發布后生成的樣式ID：
- 在JavaScript API中應用地圖樣式
將第三步中獲取的樣式ID作為setMapStyleV2方法的參數。(注意：發布的styleID需要與ak為同一個用戶)
相關代碼如下：
map.setMapStyleV2({ styleId: '你的樣式ID' });效果展示：
帶高度的點（標記地點、覆蓋物）
Marker3d | 百度地圖API SDK (baidu.com)
- 簡單理解就是在地圖圖層上層添加元素展示。在百度地圖中覆蓋物種類有很多，通過不同的覆蓋物函數，在地圖上添加不同的覆蓋物如點、面、信息框等。后面會詳細介紹下覆蓋物。
- 使用map.addOverlay()方法向地圖添加覆蓋物，使用map.removeOverlay()方法移除覆蓋物。
拾取坐標系統 (baidu.com)
示例代碼：
// 創建位置點var point = new BMapGL.Point(121.52, 31.0)// 創建帶高度的點var marker3d = new BMapGL.Marker3D(point, 8000, {size: 50,shape: BMAP_SHAPE_CIRCLE,fillColor: '#367cc2',fillOpacity: 0.6});// 將點添加到地圖上:通過map.addoverlay()方法將創建的點覆蓋物添加到地圖上。map.addOverlay(marker3d);效果展示 ：
點擊事件
以剛才的帶高度的點為例，如果我想通過點擊標記點，彈出信息
JavaScript API | 百度地圖API SDK (baidu.com)
地圖JS API示例 | 百度地圖開放平臺 (baidu.com)
百度地圖JSAPI 2.0類參考 (baidu.com)
- 示例代碼
效果展示：
總結
以上是生活随笔為你收集整理的百度地图 JavaScript API的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 解决移动端Retina屏边框1px 问题
- 下一篇： JavaScript绘制矢量图