uni-app vue3中H5使用map组件的polyline的colorList属性无效？

发布于 1周前 作者 caililin 来自 Uni-App

uni-app vue3中H5使用map组件的polyline的colorList属性无效？

示例代码：

<template lang="pug">  
div.map#container  
  map.map__content(  
    :longitude="106.631187"  
    :latitude="29.718143"  
    :enable-poi="true"  
    :enable-3D="true"  
    :enable-building="true"  
    :scale="11"  
    :markers="markersList"  
    :polyline="polylineList"  
  )  
</template>  

<script setup>  
let markersList = [  
  {  
    id: 0,  
    latitude: '29.718143', // 纬度  
    longitude: '106.731187', // 经度  
    width: 30,  
    height: 40,  
    iconPath: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png',  
    callout: {  
      content: '文本的内容',  
      color: '#ffe300',  
      fontSize: 14  
    }  
  },  
  {  
    id: 1,  
    latitude: '29.718143', // 纬度  
    longitude: '106.631187', // 经度  
    width: 30,  
    height: 40,  
    iconPath: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/end.png',  
    callout: {  
      content: '文本的内容1',  
      color: '#ffe300',  
      fontSize: 14  
    }  
  }  
]  

let polylineList = [  
  {  
    points: [  
      {  
        latitude: '29.718143',  
        longitude: '106.731187'  
      },  
      {  
        latitude: '29.718143',  
        longitude: '106.711187'  
      },  
      {  
        latitude: '29.718143',  
        longitude: '106.691187'  
      },  
      {  
        latitude: '29.718143',  
        longitude: '106.651187'  
      },  
      {  
        latitude: '29.718143',  
        longitude: '106.631187'  
      }  
    ],  
    colorList: ['#ec410f', '#ff00ea', '#000dff', '#ffe300'],  
    width: 10  
  }  
]  
</script>  

<style scoped lang="scss">  
.map {  
  width: 100vw;  
  height: 100vh;  

  &__content {  
    width: 100%;  
    height: 100%;  
  }  
}  
</style>

操作步骤：

  • 直接设置属性无效

预期结果：

  • 设置属性有效果

实际结果：

  • 设置属性无效果

bug描述：

  • h5中使用map组件设置polyline的colorList彩虹线无效

image


Harmonyos Next教程
5 回复

你好，指定颜色，还不支持h5


好吧，只写了平台差异，以为是支持的

enable-3D和enable-building这个属性map组件是不是也不支持呀

回复 1***@qq.com: 应该是，这主要是看地图厂商，应该是他们对应的版本api就没有提供相关接口

在uni-app中使用Vue 3开发H5应用时，如果遇到map组件的polyline的colorList属性无效的问题，可能是由于uni-app的H5平台对polyline的某些属性支持不完善或者存在bug。尽管colorList属性在原生小程序或其他平台上有效，但在H5平台上可能表现不一致。

为了解决这个问题，可以尝试以下几种方法，包括使用CSS样式替代、自定义绘制线条，或者检查uni-app的版本和文档更新。下面是一个使用canvas自定义绘制线条的示例代码，作为替代方案：

<template>
  <view class="container">
    <canvas canvas-id="myCanvas" style="width: 100%; height: 300px;"></canvas>
  </view>
</template>

<script>
export default {
  mounted() {
    this.drawPolyline();
  },
  methods: {
    drawPolyline() {
      const ctx = uni.createCanvasContext('myCanvas');
      const points = [
        { x: 50, y: 50 },
        { x: 150, y: 50 },
        { x: 150, y: 150 },
        { x: 50, y: 150 }
      ];
      const colors = ['red', 'blue', 'green', 'yellow']; // 示例颜色列表
      
      // 绘制线条，由于canvas不支持直接设置分段颜色，这里简单演示连续绘制不同颜色的线段
      for (let i = 0; i < points.length - 1; i++) {
        ctx.setStrokeStyle(colors[i % colors.length]);
        ctx.moveTo(points[i].x, points[i].y);
        ctx.lineTo(points[i + 1].x, points[i + 1].y);
        ctx.stroke();
      }
      
      ctx.draw();
    }
  }
};
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
</style>

在这个示例中，我们使用canvas手动绘制了polyline，并通过循环设置不同的颜色来模拟colorList的效果。由于canvas API的限制，我们不能直接设置分段颜色，但可以通过分段绘制不同颜色的线段来达到类似效果。

请注意，这种方法可能不适合所有场景，特别是当polyline非常复杂或需要频繁更新时。如果colorList属性在后续uni-app版本中得到了修复，建议使用官方组件属性以达到最佳性能和兼容性。同时，建议定期检查uni-app的官方文档和更新日志，以获取最新的功能和修复信息。

回到顶部