 
                                        
                                    
                                    - 发布:2021-02-03 09:20
- 更新:2021-02-03 09:20
- 阅读:489
产品分类: uniapp/App
PC开发环境操作系统: Mac
PC开发环境操作系统版本号: mac book pro
HBuilderX类型: 正式
HBuilderX版本号: 3.1.0
手机系统: 全部
手机厂商: 苹果
页面类型: nvue
打包方式: 云端
项目创建方式: HBuilderX
测试过的手机:
示例代码:
                                    
                                    
                                        <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)  
        }
                                     
                                
                                                                                                <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就支持
                                     
                                
                                                                                                vue文件加subnvue就支持
实际结果:
                                    
                                    
                                        vue文件加subnvue就支持
                                     
                                
                                                            vue文件加subnvue就支持
bug描述:
this.mapCtx.translateMarker 在subnvue中不支持吗?
如果是nvue文件加subnvue就支持,如果是vue文件加subnvue就不支持
 
             
             
             
			 
            
0 个回复