vue项目中如何使用高德地图

本文介绍了如何在Vue项目中集成高德地图,通过安装vue-amap插件,创建aMap.js配置文件,设置地图的key值、插件和版本。在main.js中导入并使用,然后在组件中展示地图,提供了地图的基本设置如缩放级别和中心点。
摘要由CSDN通过智能技术生成
//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]
	}
}
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值