首页 > 其他 > 详细

elementui 引入高德地图

时间:2021-06-30 21:06:54      阅读:30      评论:0      收藏:0      [点我收藏+]

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

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!