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>

elementui 引入高德地图

 

elementui 引入高德地图

上一篇:11. ES6 语法 - var 和 let 的区别


下一篇:t:datagrid 行编辑 类型备份