uniapp地图路线轨迹
时间: 2023-10-24 07:08:32 浏览: 56
要在uniapp中显示地图路线轨迹,可以使用uniapp的插件uView提供的uView-uniapp插件中的uView-AMap组件。该组件集成高德地图SDK,可以方便地使用高德地图的API。
在使用uView-AMap组件时,可以使用其提供的polyline组件来绘制路线轨迹。需要先通过高德地图SDK获取到路线规划的坐标点,然后将这些坐标点传入polyline组件中进行绘制。
以下是一个简单的示例代码:
```html
<template>
<view>
<u-view-amap :longitude="longitude" :latitude="latitude" :markers="markers" :polyline="polyline"></u-view-amap>
</view>
</template>
<script>
import uViewAMap from '@/uview-amap/uview-amap.vue'
export default {
components: {
uViewAMap
},
data () {
return {
longitude: 116.397428,
latitude: 39.90923,
markers: [
{
id: 1,
longitude: 116.397428,
latitude: 39.90923,
title: 'Marker1'
}
],
polyline: {
points: [
{longitude: 116.397428, latitude: 39.90923},
{longitude: 116.398258, latitude: 39.90864},
{longitude: 116.398265, latitude: 39.907637}
],
color: '#FF0000DD',
width: 5,
dottedLine: false
}
}
}
}
</script>
```