使用map组件根据定位动态绘制polyline，路径轨迹会闪烁，求解决方案？

DCloud_Android_ST

HX3.1.0版本已修复

4***@qq.com (作者) - 前端

再APP中发现的问标，使用的是内置高德地图

DCloud_uni-ad_HDX

vue 还是 nvue ？如何更新的？请提供个简单工程

1***@qq.com

稍后我上传一个demo，修改的官方的hello-uniapp，在API地图控制里面我添加了一个测试按钮。

2020-05-22 11:56

DCloud_uni-ad_HDX

感谢反馈，问题已确认，后期会优化

zglszp

好的，多谢您的回复！

期待新的版本进行优化处理，以便快速提升用户体验。

2020-05-23 10:48
zglszp

@DCloud_UNI_HDX,这个问题大概什么时候优化那？项目坐等上线，希望官家尽快协调人处理一下！不胜感激！！

2020-06-05 12:07
1***@qq.com

优化了吗? 现在还闪

2020-06-09 09:47

DCloud_Android_ST

问题已确认。预计下个版本修复。请留意HX版本更新日志

1***@qq.com

我看了一下发帖日期，又看了一下自己项目,至少10个月了[苦涩]

2021-01-18 08:47
DCloud_Android_ST

回复 1***@qq.com: 光说 “也遇到这种情况” 没有复现没人会跟踪管理的。最好的方法就是拿出一个能复现问题的demo。

2021-01-18 10:52

叫我白老师

<template>  
    <view>  
        <map class="map" id="map1" ref="map1"  
            :polyline="polyline"   
            :latitude="latitude"   
            :longitude="longitude"   
            :markers="markers"   
            :scale="scale"  
            :controls="controls" show-location></map>  

        <view class="info">  
            <button @click="btn1">  
                <text class="">导航到开始位置</text>  
            </button>  
            <button @click="btn2">  
                <text class="">模拟步行线路{{stepNumber}}</text>  
            </button>  
        </view>   

    </view>  
</template>  

<script>  
    // import demoData from '@/js/patrol_info_demo.json'  
    const Arr = [  
        "120.609249,28.018203","120.609388,28.01852","120.609388,28.01852","120.609323,28.018524","120.609323,28.018524","120.608971,28.018581","120.608967,28.018581","120.608394,28.018668","120.60839,28.018668","120.608498,28.018911","120.608498,28.018911",  
        "120.608524,28.018971","120.608524,28.018971","120.608655,28.019253","120.608655,28.019253","120.608733,28.019418","120.608733,28.019418","120.608845,28.01967","120.608845,28.01967","120.608932,28.019839","120.608932,28.019839","120.609076,28.020139","120.609076,28.020139",  
        "120.609527,28.020004","120.609527,28.02","120.609939,28.019878","120.609939,28.019878","120.610004,28.019861","120.610004,28.019857","120.609674,28.019145","120.60967,28.019141","120.60967,28.019141","120.60967,28.019141","120.610304,28.018967","120.610313,28.018989","120.610595,28.01967","120.610595,28.01967",  
        "120.612088,28.019206","120.612088,28.019201","120.612174,28.019401","120.612174,28.019401","120.611953,28.019475","120.611949,28.019475","120.611758,28.01954","120.611758,28.01954","120.610573,28.019883","120.610069,28.019987","120.610065,28.019987","120.610174,28.020226","120.610104,28.020252","120.610195,28.020469","120.610195,28.020469","120.610356,28.020825"  
    ];  

    let $map;  
    export default {  
        data() {  
            return {  
                latitude: 28.017397,  
                longitude: 120.608803,  
                scale : 16,  
                markers: [],  
                polyline : [{},{}],  
                stepNumber : 0,  
            }  
        },  
        onLoad() {  
            $map = uni.createMapContext('map1', this);  

            this.updatePolyline(0, {  
                points : Arr.map(value => {  
                    value = value.split(',');  
                    return {  
                        longitude : value[0],  
                        latitude : value[1]  
                    }  
                }),  
                color : '#FA0202',  
                width : 6, //   线的宽度    Number  否  
            });  

        },  
        methods: {  
            btn1(){  
                this.updatePolyline(1, {  
                    points : [{  
                        longitude: this.longitude,  
                        latitude: this.latitude,  
                    },{  
                        latitude : this.polyline[0].points[0].latitude,  
                        longitude : this.polyline[0].points[0].longitude,  
                    }],  
                    color : '#019BFF',  
                    // arrowLine : true,    //带箭头的线   
                    dottedLine : true,      //是否虚线  
                    width : 4, //   线的宽度    Number  否  
                })  
            },  

            btn2(){  
                this.stepNumber = 0;  
                this.updatePolyline(0, {  
                    points : [],  
                    color : '#FA0202',  
                    width : 6, //   线的宽度    Number  否  
                })  

                this.btn2.setInter = setInterval(() => {  
                    let value = Arr[this.stepNumber].split(',');  
                    this.polyline[0].points.push({  
                        longitude : value[0],  
                        latitude : value[1]  
                    });  

                    this.updatePolyline(0, this.polyline[0]);  

                    if(this.stepNumber >= Arr.length){  
                        clearInterval(this.btn2.setInter);  
                    }  
                    this.stepNumber   ;  
                }, 1000);  
            },  
            // 更新线路方法，解决更新数组不更新视图的问题  
            updatePolyline(index, obj){  
                this.$set(this.polyline, index, obj);  
                this.polyline = [...this.polyline];  
            }  
        },  
    }  
</script>  

<style>  
.map{  
    width: 750rpx;  
    height: 750rpx;  
}  
.info{  
    width: 750rpx;  
}  
</style>

我写一个吧

DCloud_Android_ST

附件上传个demo吧，代码测试没看出来什么闪烁

2021-01-14 11:36
1***@qq.com

回复 DCloud_Android_ST: 上边那段代码我测试了确实闪烁啊，我这边手机参数华为荣耀10X，安卓10，运存6G，处理器HUAWEI Kirin 710A

2021-01-14 12:59
DCloud_Android_ST

回复 1***@qq.com: 嗯看样子this.stepNumber++；这段代码我这边没有显示++导致。所以别发代码片段太耽误事

2021-01-14 14:55
叫我白老师

回复 DCloud_Android_ST: 汗，才发现 ++符号被吃了

2021-01-14 15:17

zglszp

我们也遇到了这种情况，IOS正常，Android闪烁，原因应该是polyline每次都是全部点重新绘制导致。
官方能不能关注一下这个问题，现在这样非常影响用户体验。

1***@qq.com

手动@DCloud_UNI_HDX 看一下我直接改的hello-uniapp，API/map/map.nvue，line:287 有我添加的测试方法，iOS就是颜色配置不太好设置，就是安卓的闪烁严重，超级严重，尤其是画多条路径的时候。

testtest.zip

zglszp

DCloud_UNI_HDX官家，您需要的示例工程，请查看楼上1227971437@qq.com发的testtest.zip附件！
期待您的回复！多谢！

testtest.zip

DCloud_Android_ST

下载了你这个示例并没有所谓的闪烁要不你再发个明显的

2020-08-06 18:28
zglszp

回复 DCloud_Android_ST: 你是用Android机器测试的吗？5月22日DCloud_UNI_HDX已经确认了这个问题。说是后期优化

2020-08-11 16:52
DCloud_Android_ST

我来跟踪这问题。我是没复现。你出个示例我复现看下问题

2020-08-11 16:55
zglszp

回复 DCloud_Android_ST: 好的

2020-08-11 17:39
hxm

回复 DCloud_Android_ST: 这个不需要demo，就是假如我现在有500个经纬度点集合，初始从0开始，每100毫秒增加10个到map的polyline[0]point里面去，就会出现绘制闪烁，我猜测是因为给地图使用currentPolyline数组，每次都是重新赋值，所以每次都是全部更新。通过push函数给currentPolyline下的point进行累积增加，是无法触发地图线条更新的。

2021-01-08 14:57
hxm

回复 DCloud_Android_ST: 只能这样赋值，this.currentPolyline = [

{

points: [

...arr

],

...lineStyle

}

]

而使用this.currentPolyline[0].points.push({lng,lat}),这样在循环中去push是无法更新地图的绘制的线的。官方可以去使用这个方法去测试一遍。别再沉了。

2021-01-08 15:01

zglszp

@DCloud_UNI_HDX ，这个问题已经确认2个月了，还没得到修复，很难吗？
我看最新的版本都有map相关问题修复，目前这个问题严重影响用户体验，望官方尽快帮忙修改这个bug。多谢！！！

zglszp

@DCloud_UNI_HDX ，这个问题已经确认2个月了，还没得到修复

官方不准备修复吗？？？？？？？
急等回复

叫我白老师

我也遇到了额

1***@qq.com

催一下，官方大大快点给个说法

DCloud_Android_ST

HXdemo示例发下我这边跟踪下别发什么片段代码没有意义哦

2021-01-13 17:23
1***@qq.com

回复 DCloud_Android_ST: 稍等上传

2021-01-13 17:23
1***@qq.com

回复 DCloud_Android_ST: 我这边找不到了，您那边还能找到我以前上传的demo嘛，把里边的point增加多一点就行

2021-01-13 18:29
DCloud_Android_ST

回复 1***@qq.com: 找不到。没事你写个简单示例就行只要能复现问题就可以了

2021-01-13 18:31
1***@qq.com

回复 DCloud_Android_ST: 老哥，其实问题很简单，大量轨迹点重绘闪烁，我给你一份轨迹可以吗？

2021-01-13 18:34
DCloud_Android_ST

回复 1***@qq.com: 我只是收集问题并上报。你非让我自己写demo那我一天也收集不来几个问题了。所以你们最好把测试项目弄好。我直接转给相关人员测试复现了。

2021-01-13 18:41
叫我白老师

回复 DCloud_Android_ST: 我写了一个demo，麻烦看一下谢谢

2021-01-14 11:18

叫我白老师

先按【导航到开始位置】，再按【模拟步行线路】，红色的线就会开始延长，放大看蓝色的虚线偶发性闪烁，模拟器上步行到35步左右闪退重启。

仔细看视频，33秒红色和蓝色一起闪烁，40秒仅蓝色闪烁，45秒闪退重启（溢出了？）
用的网易MuMu模拟器，CPU2核，4GB内存

QQ20210114-122620-HD.mov_.zip

叫我白老师

如果用vue-map做，数组push方式增加线路，体验不错
但是vue-map功能没nvue-map丰富
如果nvue-map里能针对polyline做个push之类的add方法，就更好了

$map = uni.createMapContext('map1', this);  
$appMap = $map.$getAppMap();  

// 创建一个折线对象  
var points = [];  
var $polyline = new plus.maps.Polyline(points);  
$polyline.setLineWidth( 10 );  
$polyline.setStorkeColor( "#ff0000" );  
$appMap.addOverlay($polyline);    

Arr.forEach(value => {  
    points.push(new plus.maps.Point(value[0], value[1]));  
    $polyline.setPath( points );  
})

使用map组件根据定位动态绘制polyline，路径轨迹会闪烁，求解决方案？

15 个回复

公告

相关问题

使用map组件 根据定位动态绘制polyline，路径轨迹会闪烁，求解决方案？

与内容相关的链接

15 个回复

公告

相关问题

使用map组件根据定位动态绘制polyline，路径轨迹会闪烁，求解决方案？