4***@qq.com
4***@qq.com
  • 发布:2020-02-14 11:06
  • 更新:2021-04-29 18:01
  • 阅读:2196

【报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 负责人:无 分享
已邀请:
神越科技

神越科技 - app

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

4***@qq.com

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

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

方圆1

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

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