uni-app+vue3中安卓应用中使用map组件的polyline的bug

uni-app+vue3中安卓应用中使用map组件的polyline的bug

开发环境 版本号 项目创建方式
Windows 11 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：4.66

手机系统：Android

手机系统版本号：Android 15

手机厂商：小米

手机机型：红米k60pro

页面类型：vue

vue版本：vue3

打包方式：云端

项目创建方式：HBuilderX

示例代码：

<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')  
})

更多关于uni-app+vue3中安卓应用中使用map组件的polyline的bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

是不是你用到了只在 nvue 上生效的属性了

更多关于uni-app+vue3中安卓应用中使用map组件的polyline的bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html


应该是的了，查了下文档，上面说的那三个都在nvue里生效，我自己的是普通的vue文件，没生效

在uni-app的map组件中，Android平台对polyline的colorList支持确实存在一些限制。从你的代码来看，问题可能出现在以下几个方面：

  1. colorList配置问题：Android平台对polyline的colorList支持不如iOS完善，需要确保colorList数组长度与points数组长度严格对应。你的代码中colorList是从data.slice(1, points.length - 1)生成的，这可能导致长度不匹配。

建议修改colorList生成逻辑：

const colorList = data.map((item, index) => {
  if (index === 0 || index === data.length - 1) return '#000000' // 首尾点默认颜色
  const speed = Number(item.speed)
  if (speed < 10) return '#FF3141'
  if (speed >= 10 && speed < 20) return '#FF6010'
  return '#09AE00'
})
  1. includePoints回调问题：Android平台下map组件的某些方法回调可能不会触发，这是已知的平台差异。建议添加fail回调进行调试：
mapContext.value?.includePoints({
  padding: [12, 12, 36, 12],
  points,
  success: (...args) => {
    console.log('includePoints成功', args)
  },
  fail: (err) => {
    console.log('includePoints失败', err)
  }
})
  1. 地图上下文获取时机：确保onReady在组件完全渲染后执行，可以尝试使用nextTick：
onMounted(() => {
  nextTick(() => {
    mapContext.value = uni.createMapContext('map')
  })
})
回到顶部