vue中使用高德地图

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)
　　}
}