码迷,mamicode.com
首页 > 其他好文 > 详细

elementui 引入高德地图

时间:2021-07-01 16:30:44      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:初始化   ade   集合   edit   插件   key   VID   rgba   安装   

使用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 引入高德地图

标签:初始化   ade   集合   edit   插件   key   VID   rgba   安装   

原文地址:https://www.cnblogs.com/ckfuture/p/14956119.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!