vue-amap使用案例——高德地图多组可切换点坐标

vue-amap | 基于 Vue 2.x 与高德的地图组件

//参加比赛的时的一个需求，当时时间比较紧，代码很烂，慎看

效果图

创建一个基于 webpack 模板的新项目

安装vue-amp

npm install vue-amap --save

在项目中引入vue-amap

// 在main.js中引入vue-amap
import AMap from 'vue-amap'
Vue.use(AMap);
AMap.initAMapApiLoader({
  key: 'your amap key',  //高德地图key
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor']
});

创建Map.vue 开始代码编写 首先是template部分

script部分

style 部分