【报Bug】hbuilder x 2.6.5 nvue模式中map地图中marker不显示，采用push的方式添加经纬度时polyline不画线

分类：nvue

map nvue bug已修复

在hbuilder x 2.6.5 nvue模式中map。
polyline画线points如果采用push的方式动态添加经纬度的话，地图上不会画线，demo app见hello2.zip第162行开始。

if (this.polylines[count].points.length <= POINTS) {  
                            this.polylines[count].points.push(LOCATION);  
                        } else {  
                            count++;   
                            this.polylines.splice(count, 0, {  
                                color: '#DC143C',  
                                arrowLine: true,  
                                width: width,  
                                points: [this.polylines[count - 1].points[POINTS - 1]]  
                            });   
                            // 接上一根线最后一点7  
                            this.polylines[count].points.push(LOCATION);   
                        }

marker对象中如果直接修改经纬度的话，marker也不会显示：demo app见hello2.zip第190行开始

// 采用下面这种方式marker不显示  
this.carMarkers[0].longitude = LOCATION.longitude  
 this.carMarkers[0].latitude = LOCATION.latitude

在nvue中如果polyline采用赋值的方式可以画线，demo app见hello3.zip，但是设置线条颜色在ios 13(其他ios未测试,在安卓端起作用)上不起作用。而且线条每段都带有箭头，如图：

arrowIconPath在iso上也不起作用，borderColor在ios和安卓上都不起作用。

hello2.zip

hello3.zip

2020-03-17 11:11 负责人:无分享

5 个回复

DCloud_uni-ad_HDX

push问题需要用计算属性

<template>  
    <view>  
        <map :polyline="polyline"></map>  
        <button @click="addpolyline">add polyline</button>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                covers: [],  
            };  
        },  
        computed: {  
            polyline() {  
                return this.covers.slice(0);  
            }  
        },  
        methods: {  
            addpolyline() {  
                this.covers.push({  
                    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  
                });  
            }  
        }  
    }  
</script>

DCloud_UNI_FXY

关于vue中数组更新的问题，参考文档：https://cn.vuejs.org/v2/guide/list.html#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9

DCloud_uni-ad_HDX

app-nvue 的 polyline 属性不支持 Color 参考文档 https://uniapp.dcloud.io/component/map
注意：ios 的 color 不支持 argb十六进制，使用 rgba()，参考文档注意事项

1***@qq.com

道理我都懂，rgba也不生效，color : 'rgba(255,123,0,1)';这样写没问题的吧

2020-05-16 18:05
jeawy (作者)

回复 1***@qq.com: rgba好像也不行，我们后来用arrowIconPath，具体你可以查一下这个的用法

2020-10-11 21:17
1***@qq.com

回复 jeawy: 多谢，我试试

2020-11-06 08:48