uni-app 地图控制组件createMapContext中的translateMarker函数在H5环境下存在bug
uni-app 地图控制组件createMapContext中的translateMarker函数在H5环境下存在bug
测试过的手机
浏览器
示例代码
以下代码实现车辆轨迹回放的功能，在微信小程序中运行正常，在H5环境下车头方向不正确
操作步骤
直接复制以下代码新建vue页面，在web浏览器下运行
预期结果
车头方向应该与行驶方向一致
实际结果
车头方向错乱
bug描述
<template>
<view>
<map id="map" show-location="true" enable-rotate="true" :style="{width: '750rpx', height: winHeight+ 'px'}" :longitude="longitude" :latitude="latitude" :scale="16" :markers="markers"></map>
</view>
</template>
<script>
var markerInterval = 0;
export default {
data() {
return {
winHeight:0,
markers:[{
id: 100,
longitude: 104.929272,
latitude: 25.097456,
width: 40,
height: 22,
anchor:{x: 0.5, y: 0.5},
rotate: -90,
iconPath: 'https://webapi.amap.com/images/car.png'
}],
longitude: 104.929272,
latitude: 25.097456,
}
},
onLoad() {
var that = this;
uni.getSystemInfo({
success(res) {
that.winHeight = res.windowHeight;
}
});
},
onUnload(){
clearInterval(markerInterval);
},
onReady(){
let index = 0;
let list = [
{lon:104.929272, lat:25.097456},
{lon:104.929259, lat:25.097619},
{lon:104.929247, lat:25.097782},
{lon:104.929225, lat:25.097951},
{lon:104.929182, lat:25.098185},
{lon:104.929136, lat:25.098386},
{lon:104.929089, lat:25.098587},
{lon:104.929038, lat:25.098756},
{lon:104.928986, lat:25.098926},
{lon:104.928894, lat:25.099192},
{lon:104.928840, lat:25.099332},
{lon:104.928786, lat:25.099472},
{lon:104.928732, lat:25.099612},
{lon:104.928678, lat:25.099753},
{lon:104.928624, lat:25.099893},
{lon:104.928561, lat:25.100049},
{lon:104.928497, lat:25.100205},
{lon:104.928433, lat:25.100361},
{lon:104.928369, lat:25.100517},
{lon:104.928305, lat:25.100673},
{lon:104.928111, lat:25.100673},
{lon:104.927917, lat:25.100674},
{lon:104.927723, lat:25.100674},
{lon:104.927529, lat:25.100675},
{lon:104.927361, lat:25.100672},
{lon:104.927194, lat:25.100670},
{lon:104.927026, lat:25.100667},
{lon:104.926858, lat:25.100664},
{lon:104.926690, lat:25.100662},
{lon:104.926523, lat:25.100659},
{lon:104.926355, lat:25.100656},
{lon:104.926187, lat:25.100653},
{lon:104.926019, lat:25.100651},
{lon:104.925851, lat:25.100648},
{lon:104.925684, lat:25.100645},
{lon:104.925516, lat:25.100643},
{lon:104.925348, lat:25.100640},
{lon:104.925180, lat:25.100637},
{lon:104.925276, lat:25.100798},
{lon:104.925357, lat:25.100961},
{lon:104.925439, lat:25.101125},
{lon:104.925521, lat:25.101281},
{lon:104.925604, lat:25.101438},
{lon:104.925687, lat:25.101594},
{lon:104.925527, lat:25.101660}
];
var that = this;
var mapCtx = uni.createMapContext('map', that);
clearInterval(markerInterval);
markerInterval = setInterval(function(){
if (index >= list.length) {
clearInterval(markerInterval);
return;
}
let p = index > 0 ? list[index - 1] : list[index];
let e = list[index];
let rotate = that.getAngle(p.lon, p.lat, e.lon, e.lat);
mapCtx.translateMarker({markerId:100, destination:{longitude:e.lon,latitude:e.lat}, rotate:rotate, duration:100, animationEnd:function(){}});
index++;
}, 1000);
},
methods: {
getAngle(lng1,lat1,lng2,lat2){
var PI = 3.1415926;
var x = Math.sin(lng2 - lng1) * Math.cos(lat2);
var y = Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1) * Math.cos(lat2) * Math.cos(lng2 - lng1);
var angle = Math.atan2(x,y) * 180 / PI;
return angle>0?angle:angle+360;
}
}
}
</script>
更多关于uni-app 地图控制组件createMapContext中的translateMarker函数在H5环境下存在bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html
