[JavaScript知识库] vue项目中如何使用高德地图

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> vue项目中如何使用高德地图 -> 正文阅读

[JavaScript知识库]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]
	}
}
}