當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

百度地图 JavaScript API

發布時間：2023/12/20 javascript 23 豆豆

生活随笔收集整理的這篇文章主要介紹了百度地图 JavaScript API 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文章目錄

- 1、賬號申請
- 2、創建應用
- 3、使用地圖
- - 介紹
  - 示例
- 4、具體使用
- - 控件
  - 個性地圖
  - 帶高度的點（標記地點、覆蓋物）
  - 點擊事件

參考資料：入門百度地圖 JavaScript API | 8月更文挑戰 - 掘金 (juejin.cn)

今天在使用Echarts添加地圖模塊（精確到每個樓棟）遇阻塞，現將一些部分走通的小技巧分享給大家

先看一下簡單的使用效果：

1、賬號申請

先申請成為百度開發者（需要填寫身份證信息、申請理由等），創建地圖應用生成 AK。

百度地圖開放平臺 | 百度地圖API SDK | 地圖開發 (baidu.com)

一般會秒同意，所以不用擔心時間問題

2、創建應用

注意

應用類型選擇瀏覽器端。
白名單輸入*號，所有地址都可以訪問。

3、使用地圖

復制你的AK放入案例的示例代碼即可看到效果

介紹

在頁面使用script標簽引入

v : 地圖api版本。

type : 添加type=webgl，使用3D地圖類型。

ak : 剛才創建應用的ak值。

百度地圖示例中心

示例

示例代碼
<!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	默認位于地圖左下方，用于展示版權信息

參考示例：

代碼展示

var scaleCtrl = new BMapGL.ScaleControl() // 添加比例尺控件 map.addControl(scaleCtrl) var zoomCtrl = new BMapGL.ZoomControl() // 添加縮放控件 map.addControl(zoomCtrl) var cityCtrl = new BMapGL.CityListControl() // 添加城市列表控件 map.addControl(cityCtrl)

效果展示

到了這里就要提一句。百度地圖左下角的圖標，其實就是個img。要隱藏他只要找到樣式名設置隱藏就行。這里不直接對.anchorBL隱藏是因為其他控件也使用了這個樣式名。

// 圖標 .anchorBL img {display: none; } // 備案信息 .BMap_cpyCtrl.anchorBL span {display: none !important; }

控制控件位置等操作操作查看官方文檔

個性地圖

創建個性化地圖樣式

進入地圖開放平臺控制臺頁面，在我的地圖中，創建一個地圖樣式：

編輯樣式

點擊創建的地圖樣式，進入樣式編輯器，根據您的需求自由編輯地圖樣式：

發布樣式并獲取樣式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)

示例代碼

// 創建信息窗口var opts = {width: 200,height: 100,title: '施工地點'};var infoWindow = new BMapGL.InfoWindow('地址：上海市達令巷公園', opts);// 點標記添加點擊事件marker3d.addEventListener('click', function () {map.openInfoWindow(infoWindow, point); // 開啟信息窗口});

效果展示：

總結

以上是生活随笔為你收集整理的百度地图 JavaScript API的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：解决移动端Retina屏边框1px 问题
下一篇： gradle idea java ssm