uniapp H5 地图的marker旋转角度怎么设置

分类：uni-app

uniapp

uniapp 地图 marker的 rotate 旋转角度在H5上无效

目前uniapp打包的H5怎么修改地图marker的旋转角度

目前marker是车辆图标，现在车头都固定不动，角度无效。

文档上没有写支持H5，那H5为什么不支持，还是姿势不对？

各种看社区的问题，都没有，是H5放弃了吗，有没有大佬提供下方法，或者官方解决文档。

2024-04-11 17:09 负责人:无分享

6 个回复

困难总比办法多

使用自定义图标: 创建一组包含旋转状态的自定义图标，每个图标代表不同的旋转角度。然后，根据需要的旋转角度选择相应的图标显示在地图上可行吗

新手村的NPC (作者)

很可以的思路。但是我这边图标已经有24种，分30度一个图标，几百个图标了，应该不适合这种多图标的情况。

2024-04-11 17:22
困难总比办法多

或者使用<cover-view>去自定义marker

2024-04-11 17:23
新手村的NPC (作者)

回复困难总比办法多: H5好像也不出来是用<cover-view slot="callout">这种吧

2024-04-11 17:45
困难总比办法多

回复 1***@sina.cn: 忘记了h5好像不存在层级影响，app会有，使不使用cover-view应该都可以覆盖到地图上

2024-04-11 18:13

困难总比办法多

h5应该能直接覆盖

新手村的NPC (作者)

我也是按照你这个试试了下咋没有出来我也发个图

2024-04-11 19:24

新手村的NPC (作者)

@困难总比办法多和你的一样的代码吧

困难总比办法多

是呀你直接用view标签去模拟这个marker应该能行吧，这样旋转你用css 的transform: rotate(360deg);去处理角度问题应该可以吧

2024-04-12 11:20

困难总比办法多

<template>  
    <view>  
        <!--轨迹地图-->  
        <view >  
            <map class="mapbox" :latitude="latitude" :longitude="longitude">  
                <cover-view slot="callout" class="map-floatA">  
                    测试111  
                </cover-view>  
                <view class="map-floatB">测试222</view>  
            </map>  
        </view>  
    </view>  
</template>   

<script>  
    export default {  
        data() {  
            return {  
                latitude: 39.909,  
                longitude: 116.397,  
            };  
        },  
    };  
</script>  

<style lang="scss">  
    .mapbox {  
        width: 100vw;  
        height: 80vh;  
    }  
    .map-floatA {  
        position: absolute;  
        top: 300rpx;  
        left: 300rpx;  
        background-color: #292929a6;  
        color: white;  
        font-size: 24rpx;  
        padding: 10rpx 30rpx;  
        border-radius: 10rpx;  
        letter-spacing: 2rpx;  
        text-align: center;  
    }  

    .map-floatB {  
        position: absolute;  
        top: 390rpx;  
        left: 300rpx;  
        background-color: #292929a6;  
        color: white;  
        font-size: 24rpx;  
        padding: 10rpx 30rpx;  
        border-radius: 10rpx;  
        letter-spacing: 2rpx;  
        text-align: center;  
    }  
</style>