vue项目中使用vue-amap爬坑!

前言:因为项目中需要做一个类似于拖动坐标勾选划分区域的功能，所以使用到了vue-amap这个插件。

1. 首先我们还是要先来安装哈

npm install vue-amap --save
安装完成后，在vue的入口文件main.js中引入
//引入高德地图
import AMap from "vue-amap";
Vue.use(AMap);
// 初始化vue-amap
AMap.initAMapApiLoader({
  // 高德key
  key: "******************",
  // 插件集合 （插件按需引入）
  plugin: [
    "AMap.Autocomplete",
    "AMap.PlaceSearch",
    "AMap.Scale",
    "AMap.OverView",
    "AMap.ToolBar",
    "AMap.MapType",
    "AMap.PolyEditor",
    "AMap.CircleEditor",
    "AMap.Geocoder",
    "AMap.Geolocation",
    "AMap.polygon",
  ],
  uiVersion: "1.0.11", // 版本号
});

2.接下来在文件中使用

爬坑1

**官网的导入方式： 这样导入会报错，具体为撒也不太了解
 let amapManager = new VueAMap.AMapManager();
    module.exports = {
    	data(){
    	return{
    		//数据
    	}
    }
}
****我和小伙伴自己在网上百度了之后的引入方式 ,成功使用
import { AMapManager } from "vue-amap";
let amapManager = new AMapManager();
export default{
	data(){
		return{
			//数据
		}
	}
}

3.我们想在页面中的地图添加一个点击事件，并获取到点击位置的经纬度
爬坑2

<el-amap
   vid="amap"
   :zoom="zoom"
   :amap-manager="amapManager"
   :plugin="plugin"
   :events="events"
   :center="center"
   ref="map"
   class="amap-demo"
 >
 export default{
 	data(){
		return{
			 plugin: [
					events: {
			            click(e) {
			              alert("click polygon");
			            },
					}		
			]
		}
	}
 }
 *****这样写无法调用点击事件
 修改过后:
 <el-amap
   vid="amap"
   :zoom="zoom"
   :amap-manager="amapManager"
   :plugin="plugin"
   :events="events"
   :center="center"
   ref="map"
   class="amap-demo"
 >
 export default {
	data(){
		return{
		//地图中的点击事件,获取到点击坐标的经纬度
	      events: {
	        click: (e) => {
	          console.log(e);
	        },
	      },
		}
	}
}
****成功使用

后续还有一个点击获取到经纬度然后产生勾画区域的操作，可以成功获取到经纬度，但是还没有解决同步更新试图中的点。待续