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)
  }
}
 
 
上一篇:cc3000+LM3S9B96


下一篇:Pregel导读