高德文档 https://lbs.amap.com/api/wx/guide/route/route
<template>
<view class="content">
<map
style="width: 100%; height: 100%"
:polyline="polyline"
:latitude="latitude"
:longitude="longitude"
:markers="markers"
></map>
</view>
</template>
<script>
import amapFile from '../../libs/amap-wx.130.js'
export default {
data () {
return {
longitude: 117.39742, // 經度
latitude: 39.909, // 緯度
markers: [
{
id: 1,
iconPath:
'https://img1.baidu.com/it/u=937079860,934368143&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
latitude: 39.989643,
longitude: 116.481028,
width: 23,
height: 33,
callout: {
content: '起點',
fontSize: 12,
bgColor: '#fff',
color: '#000',
display: 'ALWAYS'
}
},
{
id: 2,
iconPath:
'https://img1.baidu.com/it/u=937079860,934368143&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
longitude: 114.13166,
latitude: 22.34221,
width: 23,
height: 33,
callout: {
content: '終點',
fontSize: 12,
bgColor: '#fff',
color: '#000',
display: 'ALWAYS'
}
}
], // 地圖標記點
polyline: [] // 途經點
}
},
onLoad () {
this.getLocation()
},
methods: {
getLocation () {
// 獲取當前位置
uni.getLocation({
type: 'wgs84',
success: res => {
this.longitude = res.longitude // 當前經度
this.latitude = res.latitude // 當前緯度
this.markers[0].longitude = res.longitude
this.markers[0].latitude = res.latitude
// this.markers[1].longitude = res.longitude
// this.markers[1].latitude = res.latitude
const longitude = `${res.longitude},${res.latitude}` // 起點
this.setAddress(longitude) // 當前經緯度設為起點
},
fail: err => {}
})
// this.setAddress()
},
setAddress (longitude) {
const myAmapFun = new amapFile.AMapWX({
key: '......' // 高德key
})
myAmapFun.getDrivingRoute({
origin: longitude, // 起點
destination: '114.13166,22.34221', // 終點
success: data => {
const points = []
if (data.paths && data.paths[0] && data.paths[0].steps) {
const steps = data.paths[0].steps // 獲取途徑點
steps.forEach(item => {
const poLen = item.polyline.split(';') // 對每一組途徑點的經緯度進行分割
poLen.forEach(data => {
points.push({
longitude: parseFloat(data.split(',')[0]),
latitude: parseFloat(data.split(',')[1])
})
})
})
}
// 绑定路线
this.polyline = [
{
points: points,
color: '#ff00f0',
width: 2
}
]
}
})
}
}
}
</script>
<style scoped>
.content {
width: 100vw;
height: 100vh;
}
</style>
之前没弄过地图 这次也是看着文档加查阅资料弄出来的, 只能简单使用,更多功能和方法还需继续研究,可能还有些写的不太对的地方,望各位多多指正