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