前端 vue 使用高德地图组件：（二）获取鼠标点击位置坐标 和 图标覆盖物拖动后的坐标

上一篇文章，我们已经成功加载了地图并设置了自定义的图标覆盖物，但是在业务开发中，对地图的运用肯定不是到此为止，对地图组件的操作经常需要坐标值的参与，这篇文章就是简单介绍下坐标值的获取

一：我们可以给地图组件绑定单击事件，当鼠标单击时获取对应位置的经纬度：

//绑定地图组件内单击事件
      this.mapMain.on('click', (e) => {
        this.lngMain = e.lnglat.getLng()
        this.latMain = e.lnglat.getLat()
    });

注意这里使用了箭头表达式，如果使用 function 的话会因为 this 只想问题而出错，再生成地图前进行 this 的转换也可以同样解决这个问题。

效果：

二：我们还可以对覆盖物的拖动绑定事件：

 设置覆盖物可拖动：

draggable: true, //是否允许拖动

添加拖动事件：

this.markerMain.on('dragend', e => {
        this.lngMain = e.lnglat.lng
        this.latMain = e.lnglat.lat
      })

效果：