uni-app subNVues 中使用MAP组件无法动态添加 MARKER

uni-app subNVues 中使用MAP组件无法动态添加 MARKER

bug描述:

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

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

更多关于uni-app subNVues 中使用MAP组件无法动态添加 MARKER的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

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

更多关于uni-app subNVues 中使用MAP组件无法动态添加 MARKER的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是完整的APP DEMO

回到顶部