本文主要是介绍vue项目中如何使用高德地图,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
//1、使用高德地图需要依赖 vue-amap插件
npm install vue-amap --save
//2、在src文件夹下新建plugin--->aMap.js文件,用来放置地图插件
import Vue from 'vue'
//引入地图插件
import VueAMap from 'vue-amap';
Vue.use(VueAMap);
//高德地图方法
VueAMap.initAMapApiLoader({
key: '87dea387a9762afe06aa848e3a6cd978',//高德地图的key值,自己到官网复制
plugin: [
"AMap.PolyEditor" //编辑 折线多,边形 插件集合
],
// 默认高德 sdk 版本为 1.4.4
v: '1.4.4',// 不写项目会报错
uiVersion:'1.0.11'//ui版本号
});
//3、在main.js中导入
// 引入高德地图插件
import './plugin/aMap'
//4、查看vue-amap文档,如何使用map
//需要使用地图的页面
//具体参数自行查看文档
<div style="height:100vh">
<el-amap
:zoom="zoom" //默认地图显示的比例
:center="center" //默认显示地图的经纬度
vid="amapDemo"
:events="events"
class="amap-demo"
></el-amap>
</div>
export default {
data() {
return {
zoom:18,
center:[10000993,200349949]
}
}
}
这篇关于vue项目中如何使用高德地图的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!