1. npm install vue-amap --save
2. 再main.js中
import VueAMap from 'vue-amap'; Vue.use(VueAMap);// 初始化vue-amap VueAMap.initAMapApiLoader({ // 高德的key key: 'YOUR_KEY', // 插件集合 plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'], // 高德 sdk 版本,默认为 1.4.4 v: '1.4.4' });3.再public/index.html中引入 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.3&key=你的key"></script> 4.再template中写包裹地图组件的容器 <div class="amap-wrapper">
<el-amap vid="amapDemo" :zoom="zoom" :center="center"></el-amap></div> 5. 点坐标
<el-amap vid="amapDemo" :zoom="zoom" :center="center" :zooms='zooms'> <el-amap-marker v-for="marker in markers" :position="marker.position"></el-amap-marker> </el-amap>
点坐标添加点击事件:
<el-amap-marker v-for="marker in markers" :position="marker.position" :events='events' extData='这里可以携带任何类型数据'></el-amap-marker>
data(){
return{
zoom:13,
zooms:[13,18],
center:[104.10194,30.65984]
events: {click: (e) => {this.mapClickCallback(e)}}
}
}
methods:{
mapClickCallback(e){
//操作你要做的事情
console.log(e)
//获取坐标设置携带的信息
console.log(e.target.G.exData)
}
}