cC2015
cC2015
  • 发布:2021-02-03 09:20
  • 更新:2021-02-03 09:20
  • 阅读:390

this.mapCtx.translateMarker 在subnvue中不支持吗

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: mac book pro

HBuilderX类型: 正式

HBuilderX版本号: 3.1.0

手机系统: 全部

手机厂商: 苹果

页面类型: nvue

打包方式: 云端

项目创建方式: HBuilderX

测试过的手机:

红米8 和ios模拟器

示例代码:

<map id="map" ref="map" v-if="longitude && latitude" :longitude="longitude" :latitude="latitude" scale="14" :markers="markers" :polyline="polyline"
show-location style="width: 750rpx; height: 1000rpx;"></map>

pageInit() {
console.log('324')

            console.log(this.mapCtx)  
            let that = this;  
            this.longitude = 114.085947  
            this.latitude = 22.547  
            this.mapCtx = uni.createMapContext('map', this);  

            // 坐标集合  
            let points = [{  
                longitude: this.longitude,  
                latitude: this.latitude  
            }, {  
                longitude: this.longitude + 0.01,  
                latitude: this.latitude + 0.01  
            }, {  
                longitude: this.longitude - 0.01,  
                latitude: this.latitude + 0.02  
            }, {  
                longitude: this.longitude - 0.01,  
                latitude: this.latitude + 0.01  
            }, {  
                longitude: this.longitude,  
                latitude: this.latitude  
            }];  
            // 标记点集合  
            let markers = points;  
            markers.map((value, index) => {  
                markers[index].iconPath= '/static/img/icon-online-nor.png',  
                markers[index].id = index + 1;  
            });  
            that.polyline = [{  
                points: points,  
                color: "#FF0000DD",  
                width: 2  
            }]  
            console.log('dsds')  
            that.markers = markers  
            setTimeout(()=>{  
                that.translateMarker(markers);  
            },10000)  
        },  
        // 平移marker,带动画  
        translateMarker(markers) {  
            let that = this;  
            let markerId = markers[that.i].id;  
            console.log(markerId)  
            let destination = {  
                longitude: markers[that.i + 1].longitude,  
                latitude: markers[that.i + 1].latitude  
            };  
            let getDistance = that.getDistance(markers[that.i].latitude, markers[that.i].longitude, markers[that.i + 1].latitude, markers[that.i + 1].longitude);  
            let duration = getDistance * 2; // 根据距离计算平移的速度,看起来保持匀速  
            this.mapCtx.translateMarker({  
                markerId: markerId,  
                destination: destination,  
                autoRotate: true,  
                rotate: 30,  
                duration: 500,  
                animationEnd(res) {  
                    that.i = that.i + 1  
                    // 小于长度减1才执行  
                    if (that.i < markers.length - 1) {  
                        that.translateMarker(markers);  
                    }  
                },  
                fail(err) {  
                    console.log('fail', err)  
                }  
            })  
        },  
        // 计算两坐标点之间的距离  
        getDistance(lat1, lng1, lat2, lng2) {  
            let rad1 = lat1 * Math.PI / 180.0;  
            let rad2 = lat2 * Math.PI / 180.0;  
            let a = rad1 - rad2;  
            let b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;  
            let r = 6378137;  
            return (r * 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(rad1) * Math.cos(rad2) * Math.pow(Math  
                .sin(b / 2), 2)))).toFixed(0)  
        }

操作步骤:

vue文件加subnvue就不支持

预期结果:

vue文件加subnvue就支持

实际结果:

vue文件加subnvue就支持

bug描述:

this.mapCtx.translateMarker 在subnvue中不支持吗?

如果是nvue文件加subnvue就支持,如果是vue文件加subnvue就不支持

2021-02-03 09:20 负责人:无 分享
已邀请:

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