elementui 引入高德地图

使用vue-amap 一套专门用于vue的高德地图插件

1.安装 npm install vue-amap -S

 

2.在main.js中引入

import AMap from 'vue-amap'
Vue.use(AMap)
// 初始化地图
AMap.initAMapApiLoader({
  　key: '自己的key',
 　 plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor']    // 插件集合
})

3.直接引用

<template>
    <div id="app">
        <h3 class="title">{{ msg }}</h3>
        <div class="amap-wrapper">
            <el-amap class="amap-box" :vid="'amap-vue'"></el-amap>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            msg: 'vue-amap向你问好！'
        }
    }
}
</script>

<style>
.amap-wrapper {
    width: 100%;
    height: 100%;
}
</style>