445080336@qq.com
445080336@qq.com
  • 发布:2020-03-13 16:24
  • 更新:2021-01-14 15:25
  • 阅读:884

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

分类:uni-app

使用map组件 根据定位动态绘制polyline,路径轨迹会闪烁,求解决方案?
在APP端发现的问题, 使用的是内置高德地图

2020-03-13 16:24 负责人:DCloud_Android_ST 分享
已邀请:
445080336@qq.com

445080336@qq.com (作者) - 前端

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

DCloud_UNI_HDX

DCloud_UNI_HDX

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

  • 1227971437@qq.com

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

    2020-05-22 11:56

DCloud_UNI_HDX

DCloud_UNI_HDX

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

  • zglszp

    好的,多谢您的回复!

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

    2020-05-23 10:48

  • zglszp

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

    2020-06-05 12:07

  • 1345682034@qq.com

    优化了吗? 现在还闪

    2020-06-09 09:47

DCloud_Android_ST

DCloud_Android_ST

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

  • 1227971437@qq.com

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

    2021-01-18 08:47

  • DCloud_Android_ST

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

    2021-01-18 10:52

zglszp

zglszp

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

1227971437@qq.com

1227971437@qq.com

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

zglszp

zglszp

DCloud_UNI_HDX官家,您需要的示例工程,请查看楼上1227971437@qq.com发的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

zglszp

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

zglszp

zglszp

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

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

叫我白老师

叫我白老师

我也遇到了额

1227971437@qq.com

1227971437@qq.com

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

叫我白老师

叫我白老师

<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>

我写一个吧

叫我白老师

叫我白老师

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

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

叫我白老师

叫我白老师

如果用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 );  
})

要回复问题请先登录注册