百度地圖使用之-----vue專案中百度地圖的應用以及遇到的一些問題
我們在專案開發時對於地圖應用也是比較常見的,因為百度地圖的開發文件都是基於HTML檔案的,並沒有介紹在Vue專案中的應用,而且網上關於在vue中的應用也比較少,官網的文件還是很容易看的懂,但是應用到vue中還是會遇到很多問題的,下面我就分享一些我在vue專案使用百度地圖的體會及問題。
一、vue專案中正確載入百度地圖
使用地圖第一步當然是得把百度地圖加載出來,然後才能進行後續的對地圖功能升級的操作。
1.首先我們需要去百度地圖開發者平臺申請一個祕鑰(這個就不多介紹了,在百度平臺上都能很容易申請到):在vue的index.html檔案中引入:
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的祕鑰"></script>
2.然後你需要給地圖一個容器,而且必須要有寬高
<div id="mapbox">
<div id="allmap" class="allmap"></div>
</div>
3.在webpack.config.base.js 檔案中:
entry: { app: './src/main.js' }, // 與entry同級位置 externals: { "BMap": "BMap", "BMapLib": "BMapLib", "BMAP_ANCHOR_TOP_RIGHT": "BMAP_ANCHOR_TOP_RIGHT", "BMAP_DRAWING_POLYLINE": "BMAP_DRAWING_POLYLINE" },
4. 在vue檔案中引入所需要用到的檔案,有很多小夥伴就會疑問了,官網html檔案中的都不用第3和第4步,直接在script標籤中引入檔案就可以了,對,這也許是和在vue專案中應用最大的不同了吧,如果不這樣做,那你下面用到的BMap,滑鼠繪製的用到的BMapLib,BMAP_ANCHOR_TOP_RIGHT,BMAP_DRAWING_POLYLINE就全部會報undefined,但是我也是弄了很久,才嘗試這樣做
import BMap from 'BMap' // 百度地圖 import BMapLib from 'BMapLib' // 引入滑鼠繪製 import BMAP_DRAWING_POLYLINE from 'BMAP_DRAWING_POLYLINE' // 折線 import BMAP_ANCHOR_TOP_RIGHT from 'BMAP_ANCHOR_TOP_RIGHT' // 滑鼠繪製工具欄位置 import lampicon from './asset/location.png' import flag from './asset/flag.png'
5.進行地圖的例項化,在methods中定義例項化地圖和生成自定義圖示方法:
// 建立地圖
loadmap() {
/** 建立地圖物件,初始化地圖中心點 */
// 百度地圖API功能
this.map = new BMap.Map('allmap', { enableMapClick: false }) // 建立Map例項,關閉地圖可點項
this.map.centerAndZoom(new BMap.Point(this.lg, this.la), 15) // 初始化地圖,設定中心點座標和地圖級別
// 根據搜尋返回的經緯度展示或者初始化顯示地圖中心點位置
this.map.enableScrollWheelZoom(true) // 開啟滑鼠滾輪縮放
var top_left_navigation = new BMap.NavigationControl() // 新增地圖控制元件
this.map.addControl(top_left_navigation)
/** 添加回到中心點定位控制元件 */
var geolocationControl = new BMap.GeolocationControl()
var _that = this
geolocationControl.addEventListener('locationSuccess', function(e) {
var point = new BMap.Point(_that.lg, _that.la)
_that.map.centerAndZoom(point, 15)
})
geolocationControl.addEventListener('locationError', function(e) {
// 定位失敗事件
alert(e.message)
})
// 新增控制元件到地圖
this.map.addControl(geolocationControl)
// 生成地圖標註
var Lpoint = new BMap.Point(this.lg, this.la)
this.addMarker(Lpoint, flag) // 封裝的地圖標註函式,傳入中心點,標註圖示
},
// 生成自定義圖示,位置:point, 圖示:icon
addMarker(point, icon) {
// 設定燈具圖示點尺寸
const LdeviceSize = new BMap.Size(40, 40)
// 生成燈具icon圖示
const LdeviceIcon = new BMap.Icon(icon, LdeviceSize, { // 會以base64的方式傳參iconCar
imageSize: LdeviceSize
})
// 建立燈具標註
const Lmarker = new BMap.Marker(point, {
icon: LdeviceIcon
})
// 將生成的燈具標註新增到地圖上
this.map.addOverlay(Lmarker)
if (this.oneMark) {
Lmarker.enableDragging()
}
// 建立右鍵選單
var markerMenu = new BMap.ContextMenu()
markerMenu.addItem(new BMap.MenuItem('刪除', this.removeMarker.bind(Lmarker)))
markerMenu.addItem(new BMap.MenuItem('儲存', this.saveMarker.bind(Lmarker)))
Lmarker.addContextMenu(markerMenu)
},
6.在mounted生命週期函式中執行this.loadmap()載入地圖(注意,一定要在此處載入地圖,dom結構才能獲取到,要不然地圖載入不出來)
(注意:地圖上的折線,多邊形這些滑鼠繪製是建立不了滑鼠右鍵選單的,只有標註點才能建立滑鼠右鍵選單)
二、滑鼠繪製折線,有時候我們需要在地圖上批量標註,可以用畫折線,然後在折線上生成標註點,或者單純的畫折線展示區域
/** 滑鼠繪製操作 */
// 滑鼠繪製完成回撥,獲取每個點的經緯度
overlaycomplete(e) {
this.overlays.push(e.overlay)
var path = e.overlay.getPath() // Array<Point> 返回折線陣列
for (var i = 0; i < path.length; i++) {
console.log('lng:' + path[i].lng + '\n lat:' + path[i].lat)
}
},
initDrawing() {
// 例項化滑鼠繪製工具
this.drawingManager = new BMapLib.DrawingManager(this.map, {
isOpen: false, // 是否開啟繪製模式
enableDrawingTool: true, // 是否顯示工具欄
// drawingMode:BMAP_DRAWING_POLYLINE, // 繪製模式 多邊形
drawingToolOptions: {
anchor: BMAP_ANCHOR_TOP_RIGHT, // 位置
offset: new BMap.Size(5, 5), // 偏離值
drawingModes: [
BMAP_DRAWING_POLYLINE
]
}
})
this.drawingManager.addEventListener('overlaycomplete', this.overlaycomplete)
this.clickSetMark()
},
// 點選地圖生成標註圖示並獲取經緯度
clickSetMark() {
var _that_ = this
_that_.map.addEventListener('click', function(e) {
console.log('經緯度:', e.point.lng, e.point.lat)
var p = new BMap.Point(e.point.lng, e.point.lat)
// _that_.addMarker(p, lampicon)
// 設定燈具圖示點尺寸
const LdeviceSize = new BMap.Size(40, 40)
// 生成燈具icon圖示
const LdeviceIcon = new BMap.Icon(lampicon, LdeviceSize, { // 會以base64的方式傳參iconCar
imageSize: LdeviceSize
})
// 建立燈具標註
const Lmarker = new BMap.Marker(p, {
icon: LdeviceIcon
})
// 將生成的燈具標註新增到地圖上
_that_.map.addOverlay(Lmarker)
// 建立右鍵選單
var markerMenu = new BMap.ContextMenu()
markerMenu.addItem(new BMap.MenuItem('刪除折線', _that_.removedrawing.bind(Lmarker)))
markerMenu.addItem(new BMap.MenuItem('儲存', _that_.savedrawing.bind(Lmarker)))
Lmarker.addContextMenu(markerMenu)
})
},
// 保存摺線
savedrawing() {
console.log('保存摺線')
},
// 移除繪製折線
removedrawing() {
for (var i = 0; i < this.overlays.length; i++) {
this.map.removeOverlay(this.overlays[i])
}
this.overlays.length = 0
this.map.clearOverlays()
var p = new BMap.Point(this.lg, this.la)
this.addMarker(p, flag)
},
在工具欄中需要畫點,畫圓,畫多邊形可以在例項化滑鼠繪製的地方新增繪製模式,然後我們就可以對摺線或者所標註的點進行滑鼠右鍵操作了。
最終展示的成果如下:
如有錯誤之處歡迎大家指正出來,謝謝