vue项目中简单使用高德地图

1、首先下载安装vue-amap插件

　　npm install vue-amap --save

 

2、其次在使用的组件中引入vue-amap插件

//引入地图插件

import VueAMap from 'vue-amap';

import Vue from 'vue';

Vue.use(VueAMap);

 

//高德地图方法

handlemyMapFn(){

　　VueAMap.initAMapApiLoader({

　　　　key: '你所申请的key值',

　　　　plugin: [

　　　　　　"AMap.PolyEditor" //编辑 折线多，边形

　　　　],

　　　　// 默认高德 sdk 版本为 1.4.4

　　　　v: '1.4.4'

　　});

},

 

 

3、其次在template模板中引入

<div id="container">

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

</div>

 

 

4、最后写一下样式

<style scoped>

/* --------------------------------高德地图样式----------------------------- */

#container {

　　width:100%; height: 600px;

}

</style>