uni-app中this.mapCtx.translateMarker在subnvue中不支持吗

uni-app中this.mapCtx.translateMarker在subnvue中不支持吗

项目信息 详情
产品分类 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就不支持


更多关于uni-app中this.mapCtx.translateMarker在subnvue中不支持吗的实战教程也可以访问 https://www.itying.com/category-93-b0.html

回到顶部