生活随笔
收集整理的這篇文章主要介紹了
百度地图 - 绘制驾车路线图
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
簡介
在地圖的開發(fā)中，最常出現(xiàn)的需求就是駕車線路規(guī)劃。沒開發(fā)過的人都會認為比較復雜，當把文檔看了一遍之后你就會發(fā)現(xiàn)百度api比我們想象中還要強大。下面就開始介紹如何通過百度api輕松的實現(xiàn)這個功能。
創(chuàng)建地圖
- 通過<script>標簽引入百度地圖地址，這里的ak是你在地圖服務中心注冊的。不了解的可以點 這里
<!DOCTYPE html>
<html><head><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>地圖</title><style type="text/css">html,body {height: 100%;width: 100%;}.bmap {height: 100%;width: 100%;}</style><script src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=?"></script></head><body><div id="bmap" class="bmap"></div><script>var map = new BMapGL.Map('bmap') // 創(chuàng)建Map實例// 初始化地圖,設置中心點坐標和地圖級別map.centerAndZoom(new BMapGL.Point(121.480509, 31.23592), 10)// 啟用 鼠標滾輪事件map.enableScrollWheelZoom()</script></body>
</html>
繪制路線
- 在繪制路線之前，我們需要知道途徑點地理坐標。有兩種方式，一種是使用 拾取坐標系統(tǒng) 手動獲取我們需要的城市坐標，另一種是使用Geocoder()地址解析服務，自動獲取城市坐標。
var pot1
= new BMapGL.Point(106.55276, 29.567551) var pot2
= new BMapGL.Point(112.94432, 28.236163) var pot3
= new BMapGL.Point(120.211486, 30.255827) var pot4
= new BMapGL.Point(121.481115, 31.235682)
- 到這就可以使用DrivingRoute （用于獲取駕車路線規(guī)劃方案）。簡單介紹下要使用的函數(shù)：
search() 檢索路線。傳入兩個點，路線開始點，路線結(jié)束點。自動生成繪兩點之間的線路點。setSearchCompleteCallback() 檢索結(jié)束后的回調(diào)函數(shù)。檢索完成后，獲取DrivingRoute的線路點數(shù)組，使用Polyline覆蓋物繪制路線。每一次，檢索路線完成后都會調(diào)用setSearchCompleteCallback()的回調(diào)，這樣我們就可以對不同的線路，設置不同的樣式。
var driv
= new BMapGL.DrivingRoute(map
)driv
.search(pot1
, pot2
)driv
.search(pot2
, pot3
)driv
.search(pot3
, pot4
)driv
.setSearchCompleteCallback(function () {var pts
= driv
.getResults().getPlan(0).getRoute(0).getPath() var polyline
= new BMapGL.Polyline(pts
)map
.addOverlay(polyline
)})
添加起點、終點、途經(jīng)點
- 簡單理解就是在對應的位置繪制標記，標記其實就是覆蓋物。
- 通過BMapGL.Icon()可以自定義圖片來設置標注點。因為我并未去找圖片，這里直接使用Marker()原本的樣式。
- 開發(fā)中需要對途徑點添加說明，同樣的可以使用Label()覆蓋物來添加文本。為了樣式更加好看，通過修改Label()的屬性，來可以實現(xiàn)各種樣式。
- 也可以自定義canvas覆蓋物，實現(xiàn)動畫效果(后面會講解如何實現(xiàn)自定義覆蓋物)。
var m1
= new BMapGL.Marker(pot1
)var m2
= new BMapGL.Marker(pot2
)var m3
= new BMapGL.Marker(pot3
)var m4
= new BMapGL.Marker(pot4
)map
.addOverlay(m1
)map
.addOverlay(m2
)map
.addOverlay(m3
)map
.addOverlay(m4
)var style
= {borderRadius
: '5px',borderColor
: '#ccc',padding
: '5px',fontSize
: '16px',height
: '30px',lineHeight
: '30px',fontFamily
: '微軟雅黑'}var lab1
= new BMapGL.Label('起點', { position
: pot1
})style
.backgroundColor
= '#00FFFF'lab1
.setStyle(style
)var lab2
= new BMapGL.Label('途徑點', { position
: pot2
})style
.backgroundColor
= '#F5F5DC'lab2
.setStyle(style
)var lab3
= new BMapGL.Label('途徑點', { position
: pot3
})style
.backgroundColor
= '#F5F5DC'lab3
.setStyle(style
)var lab4
= new BMapGL.Label('終點', { position
: pot4
})style
.backgroundColor
= '#DC143C'lab4
.setStyle(style
)map
.addOverlay(lab1
)map
.addOverlay(lab2
)map
.addOverlay(lab3
)map
.addOverlay(lab4
)
- 線路繪制后視野還是在原始位置，這里就需要使用setViewport，根據(jù)提供的地理區(qū)域或坐標設置地圖視野，調(diào)整后的視野會保證包含提供的地理區(qū)域或坐標。
- 簡單理解就是只要有點對象數(shù)組傳進去，系統(tǒng)就會幫你修改視野。
- 為了更好的體驗這里加了延時，當線繪制好了在修改視野。
setTimeout(function () {map
.setViewport([pot1
, pot2
, pot3
, pot4
])
}, 1000)
總結(jié)
以上是生活随笔為你收集整理的百度地图 - 绘制驾车路线图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
