uniapp中vue2项目导入高德地图

 1、看官网新手入门链接导入原生高德地图：

JS API 结合 Vue 使用-基础-进阶教程-地图 JS API 2.0|高德地图API (amap.com)

具体步骤：

第一步，安装插件

npm i @amap/amap-jsapi-loader --save

第二步，在vue组件中写代码显示地图

2、uniapp开发h5，使用map组件，使用高德地图：

在配置文件中配置地图为高德，（默认使用的是腾讯），然后填写key

然后在页面上写就好了：

 其中参数分别代表，都是动态绑定data中的值，只需要修改data中对应的值，就能在页面上看到对应的变化：

scale 设置缩放比例

polyline 设置轨迹路线

latitude，longitude 设置地图中心点的经纬度

markers 是一个数组，里面包含想要在地图上显示的坐标点

include-points 用于显示所有的坐标点在地图上可见

 绑定数据示例：

		covers: [{
						id: 1,
						latitude: 30.89,
						longitude: 120.09,
						iconPath: '../../../static/icon/起点.svg',
					},
					// {
					// 	id: 2,
					// 	latitude: 39.90,
					// 	longitude: 116.39,
					// 	iconPath: '../../../static/icon/终点.svg',
					// },
				]，
scale: 10,

polyline: [],

latitude: 30.89,
longitude: 120.09,

points: [],

显示所有的坐标点在地图上可见的方法： 

	mounted() {
			// 在mounted钩子函数中计算所有覆盖物的经纬度坐标点，并设置include-points属性
			let points = this.covers.map(item => ({
				latitude: item.latitude,
				longitude: item.longitude
			}));
			this.points = points;
		},