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>