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

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

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

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

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

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

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 返回折线数组
      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)
    },

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

最终展示的成果如下：

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