javascript
复制代码
1. 使用uniapp 提供的map组件作为承载页面
<map
id="store-order-map"
:polyline="polyline"
:markers="markers"
:include-points="includePoints"
:scale="10"
></map>
javascript
复制代码
data() {
return {
mapCtx: null
}
}
javascript
复制代码
mounted() {
this.mapCtx = uni.createMapContext('store-order-map', this)
},
javascript
复制代码
获取路径方法
fetchRoutePolyline(options) {
const { start, end, waypoints } = options
const defaultOptions = {
key: '你的key',
origin: start,
destination: end,
waypoints: waypoints,
strategy: 0,
show_fields: 'tmcs,polyline'
}
return new Promise((resolve, reject) => {
uni.request({
url: 'https://restapi.amap.com/v3/direction/driving',
data: defaultOptions,
success: (res) => {
resolve(res.data)
},
fail: (err) => {
reject(err)
}
})
})
},
javascript
复制代码
生成路径方法
async getPolyline() {
const { dc_lon, dc_main, stop_lon, stop_main } = this.info
const start = `${dc_lon},${dc_main}`
const end = `${stop_lon},${stop_main}`
const waypoints = []
try {
const polylineData1 = await this.fetchRoutePolyline({
start,
end,
waypoints
})
const polyline1 = this.generatePolyline(polylineData1, '#67c23a')
this.polyline = [polyline1]
} catch (error) {
uni.showToast({
title: error.message || '获取路径失败',
icon: 'none',
duration: 2000
})
}
}
generatePolyline(data, color = '#1684fc') {
const { route } = data
if (!route) {
return []
}
const path = route.paths[0]
const steps = path.steps
const result = []
steps.forEach((step) => {
const a = step.polyline.split(';')
a.forEach((item) => {
const b = item.split(',')
const c = {
longitude: parseFloat(b[0]),
latitude: parseFloat(b[1])
}
result.push(c)
})
})
const line = {
points: result,
color,
width: 6
}
return line
},
javascript
复制代码
创建marker
createMarkers() {
const { dc_lon, dc_main, stop_lon, stop_main, car_lat, car_lon } =
this.info
const startMarker = {
id: 1,
longitude: parseFloat(dc_lon),
latitude: parseFloat(dc_main),
iconPath: '/static/icon/xx.png',
width: 24,
height: 24
}
const endMarker = {
id: 2,
longitude: parseFloat(stop_lon),
latitude: parseFloat(stop_main),
iconPath: '/static/icon/xxx.png',
width: 24,
height: 24
}
const carMarker = {
id: 3,
longitude: parseFloat(car_lon),
latitude: parseFloat(car_lat),
iconPath: '在线地址',
width: 15,
height: 24
}
this.markers = [startMarker, carMarker, endMarker]
},