【报Bug】在nvue中map画线（polyline）动态画线不生效

分类：nvue

map

详细问题描述

在nvue中加载map，通过plus.geolocation.watchPosition定时获取经纬度坐标，然后push到polyline，地图上不画线。在vue中，重复上述步骤，可以正常画线。

具体代码：在template中： <map id="mapContainer" class="mapContainer" ref="mapContainer" longitude="mapCenter.longitude" latitude="mapCenter.latitude" polyline="polyline" @controltap="handleControllerTap" controls="controls" show-location="true" markers="[carMarkers]" >
在data中：
polyline: [
{
points: []
}
]

在plus.geolocation.watchPosition中：
this.watchId = plus.geolocation.watchPosition(
({ coords }) => {
let LOCATION = {
longitude: coords.longitude,
latitude: coords.latitude
};
this.polyline[0].points.push(LOCATION); // 将获取到的坐标点push到polyline中的points中

                },  
                err => {  
                    this.errorMessage = `${err.code}:${err.message}`;  
                },  
                {  
                    enableHighAccuracy: true,  
                    geocode: false  
                }  
            );

[期望]
期望地图中可以正常画线，但是地图上没有出现画线。
另外：在data中的polyline设置颜色，同样好像不生效。

HBuilderX ：2.5.1 包括最新的2.5.11 alpha版本

[windows版本号]
windows 10
[mac版本号]
10.13.6 在mac电脑上测试了最新的alpha版本2.5.11，同样不能正常画线

[运行端是h5或app或某个小程序？]
IOS app 未在安卓上测试
[运行端版本号]
[手机型号]
iphone 11

联系方式

281475120@163.com
QQ：461882709

2020-02-14 11:06 负责人:无分享

4 个回复

神越科技

// obj形式的坐标点数组形式
// lineListOBJ: [],
// 放到computed里
polylineList: function({ lineListOBJ }) {
let list = [
{
points: lineListOBJ,
dottedLine: false,
arrowLine: true,
borderWidth: 0,
color: '#0000AA',
width: 12
}
];
return list;
},

8***@qq.com

666 这个有效

2021-04-30 09:31

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

我同样试过：https://ask.dcloud.net.cn/question/81613中的解决方案:"不能通过push，通过新数组赋值“，测试了以下代码，任然不行：
var polylines_pts = [{
points: []
}]//存储坐标的新数组
在plus.geolocation.watchPosition中
let LOCATION = {
longitude: coords.longitude,
latitude: coords.latitude
};

                    polylines_pts[0].points.push(LOCATION)  //按照解决方案，先存在新数组中，  
                    this.polyline = polylines_pts;                      //直接赋值。  
                    console.log(JSON.stringify(this.polyline))

测试结果：
仍然没有画线

DCloud_uniAD_HDX

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

可以用计算属性

<template>      
    <view class="approve">      
        <map :markers="markers"></map>    
    </view>      
</template>      

<script>      
    export default {      
        data() {      
            return {      
                covers:[],    
            };    
        },    
        computed:{    
            markers() {// 暂时改成计算属性    
                return this.covers.slice(0);    
            }    
        },    
        onLoad() {    
            this.covers.push({}); 修改    
        }    
    }    
</script>

4***@qq.com (作者)

感谢回复。

我用的是polyline画线，我假设你提到的marker改成计算属性同样适用于画线。

我把代码做了下面的修改：

1 template中没有变化：:polyline="polyline"

2 data中：

// 地图划线

polyline_computed: [

{

points: []

}

]

3 计算属性：

computed:{

polyline(){

return this.polyline_computed; //也试过return this.polyline_computed[0].points.slice(0)

}

},

4 动态修改：

let LOCATION = {

longitude: coords.longitude,

latitude: coords.latitude

};

this.polyline_computed[0].points.push(LOCATION)

结果还是没有画线。

2020-02-15 11:01
4***@qq.com (作者)

你好，可以看看我这边的问题吗？

另外想确认下，这是不是一个bug，如果是的话，预计什么时候，哪个版本会修复？谢谢

2020-02-21 18:05
谭小谭

你好，动态画线这个问题能解决下吗，不能动态画线，这个功能就能鸡肋了啊

2021-04-28 21:25

方圆1

that.polyline.push.apply(that.polyline, polyline); 这样就行了

谭小谭

求详解

2021-04-28 21:08

该问题目前已经被锁定, 无法添加新回复

【报Bug】在nvue中map画线（polyline）动态画线不生效

详细问题描述

联系方式

4 个回复

公告

相关问题

【报Bug】在nvue中map画线（polyline）动态画线不生效

详细问题描述

联系方式

与内容相关的链接

4 个回复

公告

相关问题