1、看官网新手入门链接导入原生高德地图:
展示地图-入门教程-地图 JS API 2.0 | 高德地图API
2、uniapp开发h5,使用map组件,使用高德地图:
在配置文件中配置地图为高德,(默认使用的是腾讯),然后填写key
然后在页面上写就好了:
<map id="map" :scale="scale" :polyline="polyline" :latitude="latitude" :longitude="longitude" :markers="covers"
:include-points="points">
其中参数分别代表,都是动态绑定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;
},