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

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

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

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

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

<template>
  <div class="app-container">
    <div id="title">高德地图组件展示</div>
    <div id="mapsearch"></div>
    <div id="mapcontainer"></div>
    <div id="lnglat">
      <input type="text" style="height:30px;width:260px;text-align:center;font-size:16px" v-model="lnglat"></input>
    </div>
    <div id="footer"></div>
  </div>
</template>
<script>
import location from "@/assets/image/location.png";
export default {
  data() {
    return {
      mapMain: null,
      lngMain: 0,
      latMain: 0,
      markerMain: null
    };
  },
  created() {},
  mounted() {
    this.initMapMain();
  },
  
computed:{
    lnglat: function(){
      return this.lngMain + "," + this.latMain //计算属性，根据动态的坐标值随时获取新结果
    }
  },
  methods: {
    initMapMain() {
      //地图组件绑定div进行初始化并赋值给vue的对象
      this.mapMain = new AMap.Map("mapcontainer", {
        center: [this.lngMain, this.latMain], //设置显示的地图中心坐标
        zoom: 8 //设置地图缩放等级
      });
      //绑定地图组件内单击事件
      this.mapMain.on('click', (e) => {
        this.lngMain = e.lnglat.getLng()
        this.latMain = e.lnglat.getLat()
    });
      //生成自定义的图标
      let icon = new AMap.Icon({
        image: location,
        size: new AMap.Size(25, 35),
        imageSize: new AMap.Size(25, 35)
      });
      //初始化覆盖物对象并赋值给vue对象
      this.markerMain = new AMap.Marker({
        icon: icon, //使用自定义的图标
        position: [this.lngMain, this.latMain] //覆盖物位置坐标
      });
      this.mapMain.add(this.markerMain); //添加覆盖物到地图，与下方法同效
      // this.markerMain.set(this.mapMain) //添加覆盖物到地图，与上方法同效
      this.mapMain.setFitView(); //地图缩放等级和位置等自适应，可以放置折线对象等作为形参也可以为空
    }
  }
};
</script>
<style scoped>
#mapcontainer {
  height: 300px;
  width: 500px;
  font-size: 13px;
}
</style>

效果：

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

 设置覆盖物可拖动：

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

添加拖动事件：

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

<template>
  <div class="app-container">
    <div id="title">高德地图组件展示</div>
    <div id="mapsearch"></div>
    <div id="mapcontainer"></div>
    <div id="lnglat">
      <input type="text" style="height:30px;width:260px;text-align:center;font-size:16px" v-model="lnglat"></input>
    </div>
    <div id="footer"></div>
  </div>
</template>
<script>
import location from "@/assets/image/location.png";
export default {
  data() {
    return {
      mapMain: null,
      lngMain: 0,
      latMain: 0,
      markerMain: null
    };
  },
  created() {},
  mounted() {
    this.initMapMain();
  },
  
computed:{
    lnglat: function(){
      return this.lngMain + "," + this.latMain //计算属性，根据动态的坐标值随时获取新结果
    }
  },
  methods: {
    initMapMain() {
      //地图组件绑定div进行初始化并赋值给vue的对象
      this.mapMain = new AMap.Map("mapcontainer", {
        center: [this.lngMain, this.latMain], //设置显示的地图中心坐标
        zoom: 8 //设置地图缩放等级
      });
      //绑定地图组件内单击事件
      this.mapMain.on('click', (e) => {
        this.lngMain = e.lnglat.getLng()
        this.latMain = e.lnglat.getLat()
    });
      //生成自定义的图标
      let icon = new AMap.Icon({
        image: location,
        size: new AMap.Size(25, 35),
        imageSize: new AMap.Size(25, 35)
      });
      //初始化覆盖物对象并赋值给vue对象
      this.markerMain = new AMap.Marker({
        icon: icon, //使用自定义的图标
        draggable: true, //是否允许拖动
        position: [this.lngMain, this.latMain] //覆盖物位置坐标
      });
      this.mapMain.add(this.markerMain); //添加覆盖物到地图，与下方法同效
      //绑定覆盖物的拖动
      this.markerMain.on('dragend', e => {
        this.lngMain = e.lnglat.lng
        this.latMain = e.lnglat.lat
      })
      // this.markerMain.set(this.mapMain) //添加覆盖物到地图，与上方法同效
      this.mapMain.setFitView(); //地图缩放等级和位置等自适应，可以放置折线对象等作为形参也可以为空
    }
  }
};
</script>
<style scoped>
#mapcontainer {
  height: 300px;
  width: 500px;
  font-size: 13px;
}
</style>

效果：