vue-amap基于高德地图的vue组件使用

1. 文档

https://elemefe.github.io/vue-amap/#/

2. 安装

`npm install vue-amap --save`

3. 引入地图

在main.js中引入

`import AMap from 'vue-amap';

Vue.use(AMap);

AMap.initAMapApiLoader({

  key: 'your amap key',

  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor']

});`

4. 使用

`<el-amap class="amap-box" :vid="'amap-vue'"></el-amap>`

在html中引入此组件

5. 运行报错

6. 找了一下没找到相关解决方案，之后在一个文章中发现要去高德地图注册申请一个key

7. 申请完成之后，高德地图的开发文档： http://lbs.amap.com/api/javascript-api/gettingstarted

8. 重新在main.js中引入

`import AMap from 'vue-amap';

Vue.use(AMap);

AMap.initAMapApiLoader({

  key: 'fb489a55cfdcc5e929d5dbfe5ccc6fb2',

  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor']

});`

9. 在需要显示地图的页面

`<el-amap vid="amapDemo" class="amap-demo"

              :zoom="zoom"

              :center="center"

              :plugin="plugin">

      </el-amap>`

地图即可显示。然后再根据文档去配置需要显示的其他功能。