更新记录

1.0.0（2025-08-21） 下载此版本

新发布

平台兼容性

uni-app(4.07)

uni-app x(4.07)

其他

fx-map使用方法

支持easycom 重点事项：使用前请在fx-map目录下执行pnpm install安装openlayers依赖

<template>
    <view class="h-fill relative overflow-hidden">
        <fx-map :location="position" :direction="direction" @ready="onMapReady" @location-changed="onLocationChange" />
        <view class="absolute location float-button" @click="getPosition">
            <fx-icon name="dingwei" />
        </view>
    </view>
</template>

<script setup>
    import {
        ref,
        computed,
        onMounted
    } from 'vue';
    import {
        onUnload
    } from '@dcloudio/uni-app';
    import {
        useCompass
    } from '../../../hooks/tools/useCompass';
    import {
        useGeolocation
    } from '../../../hooks/tools/useGeolocation';

    /**
     * @type { import('vue').Ref<Number> } 当前方位角 
     */
    const direction = ref(0);

    /**
     * 获取定位
     * @type {{ position: Location, getPosition: () => Promise<[nuber, number]>}}
     */
    const {
        position,
        getPosition
    } = useGeolocation();

    const {
        onCompassChange,
        offCompassChange
    } = useCompass();

    const onMapReady = async () => {
        // #ifndef H5
        // await getPosition();

        onCompassChange((res) => {
            if (Math.abs(res.direction - direction.value) >= 1) {
                direction.value = res.direction;
            }
        });
        // #endif
    };

    const onLocationChange = () => {
        uni.hideLoading();
    }

    onUnload(() => {
        offCompassChange();
    });
</script>

<style scoped>
    .float-button {
        background: white;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 16rpx;
        width: 70rpx;
        height: 70rpx;
    }

    .location {
        bottom: 200rpx;
        right: 40rpx;
        z-index: 100000;
    }
</style>