前言:因为项目中需要做一个类似于拖动坐标勾选划分区域的功能,所以使用到了vue-amap这个插件。
- 首先我们还是要先来安装哈
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);
},
},
}
}
}
****成功使用
后续还有一个点击获取到经纬度然后产生勾画区域的操作,可以成功获取到经纬度,但是还没有解决同步更新试图中的点。待续