<div class="map-wrap">
<map
id="map"
class="map"
:markers="layer.markers"
:longitude="Number(layer.markers[0]?.longitude)"
:latitude="Number(layer.markers[0]?.latitude)"
:polyline="layer.polyline"
></map>
</div>
const result = useQuery({
queryKey: ['rideTrack', ridingId],
queryFn: () => deviceApi.getRideTrack(ridingId.value!),
enabled,
})
const layer = computed(() => {
const data = result.data.value?.data || []
console.log('data>>', data);
if (data.length === 0) {
return {
polyline: [],
markers: [],
averageSpeed: 0,
}
}
const points = data.map((item: any) => ({
longitude: Number(item.longitude),
latitude: Number(item.latitude),
}))
// 彩虹线 speed <10km/h 红色
// 10km/h <= speed < 20km/h 橙色
// speed >= 20km/h 绿色
// Android 没有效果
const colorList = data.slice(1, points.length - 1).map((item) => {
const speed = Number(item.speed)
if (speed < 10) return '#FF3141'
if (speed >= 10 && speed < 20) return '#FF6010'
return '#09AE00'
})
const polyline = [
{
points,
colorList,
width: 6,
arrowLine: true,
},
]
const start = points[0]
const end = points[points.length - 1]
const markers = [
{
id: 1,
iconPath: '/static/images/map-car-start.png',
width: 26,
height: 33,
longitude: start.longitude,
latitude: start.latitude,
},
{
id: 2,
iconPath: '/static/images/map-car-end.png',
width: 26,
height: 33,
longitude: end.longitude,
latitude: end.latitude,
},
]
// Android 没有效果
mapContext.value?.includePoints({
padding: [12, 12, 36, 12],
points,
success: (...args) => {
console.log('我执行了>>>', args)
}
})
// 计算平均速度
const averageSpeed = (
data.reduce((acc, item) => {
const speed = Number(item.speed)
return acc + speed
}, 0) / data.length
).toFixed(1)
return {
polyline,
markers,
averageSpeed,
}
})
onReady(async () => {
mapContext.value = uni.createMapContext('map')
})
9***@qq.com
- 发布：2025-06-17 12:44
- 更新：2025-06-17 13:31
- 阅读：148
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： 11
HBuilderX类型： 正式
HBuilderX版本号： 4.66
手机系统： Android
手机系统版本号： Android 15
手机厂商： 小米
手机机型： 红米k60pro
页面类型： vue
vue版本： vue3
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
设置属性无效
设置属性无效
预期结果：
设置属性有效果
设置属性有效果
实际结果：
设置属性无效
设置属性无效
bug描述：
在安卓应用上，使用map组件时，彩虹线colorList无效， includePoints，arrowLine 看着也没有效果， 请问目前是否支持这些
9***@qq.com (作者)
应该是的了，查了下文档，上面说的那三个都在nvue里生效，我自己的是普通的vue文件，没生效
2025-06-17 14:43