uni-app中map.nvue的Polyline组件color属性无效

uni-app中map.nvue的Polyline组件color属性无效

问题描述

导入hello uniapp，运行
进入页面 接口->位置->地图控制下，点击addPolyline按钮。
页面上显示的颜色（见下图）和代码中的颜色（color: ‘#FFCCFF’,color: ‘#CCFFFF’,）不对应

{
    "testPolyline": [
        {
            "points": [
                {
                    "latitude": 39.925539,
                    "longitude": 116.279037
                },
                {
                    "latitude": 39.925539,
                    "longitude": 116.520285
                }
            ],
            "color": "#FFCCFF",
            "width": 7,
            "dottedLine": true,
            "arrowLine": true,
            "borderColor": "#000000",
            "borderWidth": 2
        },
        {
            "points": [
                {
                    "latitude": 39.938698,
                    "longitude": 116.275177
                },
                {
                    "latitude": 39.966069,
                    "longitude": 116.289253
                },
                {
                    "latitude": 39.944226,
                    "longitude": 116.306076
                },
                {
                    "latitude": 39.966069,
                    "longitude": 116.322899
                },
                {
                    "latitude": 39.938698,
                    "longitude": 116.336975
                }
            ],
            "color": "#CCFFFF",
            "width": 5,
            "dottedLine": true,
            "arrowLine": true,
            "borderColor": "#CC0000",
            "borderWidth": 3
        }
    ]
}

图像


更多关于uni-app中map.nvue的Polyline组件color属性无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

当 arrowLine:true 的时候是显示的带箭头的图片拼接的线，替换图片可以参考文档 https://ask.dcloud.net.cn/article/37901，如果想显示纯颜色的线条将 arrowLine:false

更多关于uni-app中map.nvue的Polyline组件color属性无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


那是否可以改一下文档啊，这个地方没人告诉的话一般人不可能想到时这样的

回复 3***@qq.com: 好的

解决了吗兄弟？

兄弟下面有解决方法了

在uni-app的map.nvue组件中，Polyline的color属性在某些平台（尤其是iOS）确实存在渲染问题。这通常是由于平台底层实现差异导致的。

从你的代码和截图来看，实际显示的颜色与配置的#FFCCFF、#CCFFFF确实不符。这个问题主要出现在设置了dottedLine: true和arrowLine: true的情况下。

解决方案：

  1. 优先使用RGBA格式：将十六进制颜色值改为RGBA格式，例如：

    "color": "rgba(255, 204, 255, 1)",
"color": "rgba(204, 255, 255, 1)"

  2. 检查平台兼容性：iOS系统对虚线+箭头的折线颜色渲染存在已知问题，可以尝试：

    • 移除dottedLine或arrowLine属性进行测试
    • 使用更简单的实线样式

  3. 验证基础颜色：先测试基本的实线折线颜色是否正确：

    {
    "points": [...],
    "color": "#FF0000",
    "width": 5
}

  4. 平台特定处理：如果需要跨平台一致显示，建议对不同平台使用条件编译：

    #ifdef APP-PLUS
// 使用平台特定的颜色值
#endif
回到顶部