百度地图使用之-----vue项目中百度地图的应用以及遇到的一些问题

我们在项目开发时对于地图应用也是比较常见的，因为百度地图的开发文档都是基于HTML文件的，并没有介绍在Vue项目中的应用，而且网上关于在vue中的应用也比较少，官网的文档还是很容易看的懂，但是应用到vue中还是会遇到很多问题的，下面我就分享一些我在vue项目使用百度地图的体会及问题。

一、vue项目中正确加载百度地图

使用地图第一步当然是得把百度地图加载出来，然后才能进行后续的对地图功能升级的操作。

1.首先我们需要去百度地图开发者平台申请一个秘钥（这个就不多介绍了，在百度平台上都能很容易申请到）：在vue的index.html文件中引入：

[code]<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的秘钥"></script>

2.然后你需要给地图一个容器，而且必须要有宽高

[code]<div id="mapbox">
<div id="allmap" class="allmap"></div>
</div>

3.在webpack.config.base.js 文件中：

[code]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，但是我也是弄了很久，才尝试这样做

[code]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中定义实例化地图和生成自定义图标方法：

[code]// 创建地图
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) // 封装的地图标注函数，传入中心点，标注图标
},

[code]// 生成自定义图标，位置：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结构才能获取到，要不然地图加载不出来）

（注意：地图上的折线，多边形这些鼠标绘制是创建不了鼠标右键菜单的，只有标注点才能创建鼠标右键菜单）

二、鼠标绘制折线，有时候我们需要在地图上批量标注，可以用画折线，然后在折线上生成标注点，或者单纯的画折线展示区域

[code]/** 鼠标绘制操作 */
// 鼠标绘制完成回调，获取每个点的经纬度
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)
},

在工具栏中需要画点，画圆，画多边形可以在实例化鼠标绘制的地方添加绘制模式，然后我们就可以对折线或者所标注的点进行鼠标右键操作了。

最终展示的成果如下：

如有错误之处欢迎大家指正出来，谢谢