- 发布:2021-02-03 09:20
- 更新:2021-02-03 09:20
- 阅读:412
产品分类: 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 个回复