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