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

本文主要是介绍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项目中如何使用高德地图的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！