b***@qq.com
b***@qq.com
  • 发布:2022-01-16 22:06
  • 更新:2022-01-17 14:07
  • 阅读:379

【报Bug】subNVues 中使用MAP组件,无法动态添加 MARKER

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: WINDOWS 10

HBuilderX类型: 正式

HBuilderX版本号: 3.3.5

手机系统: Android

手机系统版本号: Android 10

手机厂商: 小米

手机机型: 红米10X PRO

页面类型: nvue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
    <view class="wraper">  
        <map class="map" id="mymap" ref="mymap"  
            :show-location="true"  
            :latitude="latitude"  
            :longitude="longitude"  
            :scale = "scale"  
            :markers="cmarks">  
        </map>  
        <view class="footer">  
            <button type="primary" @click="addMarker1">添加QQ</button>  
            <button type="warn" @click="addMarker2">添加WX</button>  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                latitude:30.71886,  
                longitude:103.851805,  
                scale:13,  
                markers:[{  
                    id:0,  
                    latitude:30.71886,  
                    longitude:103.851805,  
                    iconPath:"/static/mypos.png"  
                },{  
                    id:1,  
                    latitude:30.718179,  
                    longitude:103.851261,  
                    iconPath:"/static/potral0.png"  
                }],  
                testPoints:[  
                    {longitude:103.853154,latitude:30.716468},  
                    {longitude:103.854654,latitude:30.717081},  
                    {longitude:103.853893,latitude:30.71763},  
                    {longitude:103.853578,latitude:30.718862},  
                    {longitude:103.853147,latitude:30.720182},  
                    {longitude:103.852303,latitude:30.721532},  
                    {longitude:103.85124,latitude:30.721024},  
                    {longitude:103.84932,latitude:30.720756},  
                    {longitude:103.848296,latitude:30.719343},  
                    {longitude:103.847883,latitude:30.718816},  
                    {longitude:103.849485,latitude:30.718018},  
                    {longitude:103.849485,latitude:30.718018},  
                    {longitude:103.851171,latitude:30.715897}  
                ],  
                qqIndex:0,  
                wxIndex:0,  
                mymap:null  
            }  
        },  
        onReady(){  
            this.mymap = uni.createMapContext("mymap",this);  
        },  
        computed:{  
            cmarks(){  
                return this.markers  
            }  
        },  
        methods: {  
            addMarker1:function(){  
                if(this.qqIndex < this.testPoints.length){  
                    let point = this.testPoints[this.qqIndex];  
                    let markers = this.markers;  
                    let qqId = this.qqIndex+100;  
                    markers.push({  
                        id:qqId,  
                        latitude:point.latitude,  
                        longitude:point.longitude,  
                        iconPath:"/static/qq.png"  
                    });  
                    this.markers = markers;  
                    console.log(this.markers)  
                    this.qqIndex = this.qqIndex+1;  
                }  
            },  
            addMarker2:function(){  
                if(this.wxIndex < this.testPoints.length){  
                    let point = this.testPoints[this.wxIndex];  
                    let mks = [];  
                    let wxId = this.wxIndex+300;  
                    this.wxIndex = this.wxIndex+1;  
                    mks.push({  
                        id:wxId,  
                        latitude:point.latitude,  
                        longitude:point.longitude,  
                        iconPath:"/static/weixin.png"  
                    });  
                    this.mymap.addMarkers({  
                        markers:mks  
                    });  
                }  
            }  
        }  
    }  
</script>  

<style>  
    .wraper{  
        flex:1;  
    }  
    .map{  
        flex:1;  
    }  
    .footer{  
        padding: 20rpx 30rpx;  
    }  
</style>

操作步骤:

直接运行,点击按钮

预期结果:

地图上显示动态添加的marker

实际结果:

未显示

bug描述:

项目需要,用 subNVues 展示地图并实时记录运动轨迹,中途会拍照,并把照片显示在运动轨迹上。定义在DATA里面的MARKER能显示,的运行中动态添加到的markers,无法显示,已使用两种方式(直接添加到data-markers数组和使用createMapContext创建的对象调用addMarkers方法)添加,均无法显示。

2022-01-16 22:06 负责人:DCloud_Android_ST 分享
已邀请:
DCloud_Android_ST

DCloud_Android_ST

请提供完整示例demo项目 我们这边测试复现下问题

b***@qq.com

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

这是完整的APP DEMO

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