上一篇文章，我们已经成功加载了地图并设置了自定义的图标覆盖物，但是在业务开发中，对地图的运用肯定不是到此为止，对地图组件的操作经常需要坐标值的参与，这篇文章就是简单介绍下坐标值的获取
一：我们可以给地图组件绑定单击事件，当鼠标单击时获取对应位置的经纬度：
//绑定地图组件内单击事件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.lngthis.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.lngthis.latMain = e.lnglat.lat})// this.markerMain.set(this.mapMain) //添加覆盖物到地图，与上方法同效this.mapMain.setFitView(); //地图缩放等级和位置等自适应，可以放置折线对象等作为形参也可以为空}}};</script><style scoped>#mapcontainer {height: 300px;width: 500px;font-size: 13px;}</style>
效果：
