yj5894
yj5894
  • 发布:2024-04-23 10:41
  • 更新:2024-04-23 10:41
  • 阅读:48

【报Bug】地图控制组件createMapContext中的translateMarker函数在H5环境下有bug

分类:HTML5+

产品分类: HTML5+

HBuilderX版本号: 4.08

手机系统: 全部

打包方式: 离线

测试过的手机:

浏览器

示例代码:

以下代码实现车辆轨迹回放的功能,在微信小程序中运行正常,在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>
2024-04-23 10:41 负责人:无 分享
已邀请:

要回复问题请先登录注册