指南针

此功能案例实现拖拽地图，指南针更新指向

目录

• 1. 功能点
• 2. 视频演示
• 3. 核心代码
• 4. 代码下载

1. 功能点

• 相机移动事件 onCameraMove

返回本章目录

2. 视频演示

返回本章目录

3. 核心代码

引入版本：3.2.1 起支持

第一步

指南针制作

.nav_control {
    width: 54px;
    height: 54px;
    position: absolute;
    right: 20px;
    bottom: 240px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(img/earth-navi-control-pc4.png) 0% 0% / 266px no-repeat;
}
.nav_control .pointer {
    background: url(img/earth-navi-control-pc4.png) -56px -4px / 266px
        no-repeat;
    cursor: pointer;
    width: 14px;
    height: 44px;
    transform: rotate(0deg);
    opacity: 1;
    transition: all 0.5s linear;
}

<div class="nav_control">
    <div class="pointer"></div>
</div>

第二步

监听相机移动事件，重置指南针方向

let pointer = document.querySelector('.pointer')
window.appInstance.uniCall('onCameraMove', {}, (res) => {
    pointer.style.transform = `rotate(${-res.heading}deg)`
})

返回本章目录

4. 代码下载

点击跳转到下载页面

返回本章目录