xiangyuan-app/src/pages/home/components/VillageMiniMap.vue

<template>
  <div 
    class="mini-village-map" 
    :style="{
      borderColor: themeContext.resolveThemeColor('primary'),
    }"
  >
    <map 
      id="prevMap"
      map-id="prevMap"
      class="mini-village-map-map"
      :enable-poi="false"
      :scale="12"
      :longitude="AppCofig.defaultLonLat[0]"
      :latitude="AppCofig.defaultLonLat[1]"
    />
    <NoticeBar 
      v-if="currentNoticeContent"
      :content="currentNoticeContent"
      :innerStyle="{
        position: 'absolute',
        top: '20rpx',
        left: '20rpx',
        right: '20rpx',
        zIndex: 100,
        borderRadius: '30rpx',
      }"
      :textStyle="{
        fontSize: '26rpx',
      }"
      icon="https://xy.wenlvti.net/app_static/images/home/IconLightActive.png"
      :iconProps="{
        size: 34,
      }"
      textColor="#C9211F"
      backgroundColor="#D9492E10"
    />
    <Button 
      :innerStyle="{
        position: 'absolute',
        bottom: '20rpx',
        right: '20rpx',
        zIndex: 100,
        backgroundColor: '#ffffff',
      }" 
      icon="navigation" 
      @click="getCurrentLonlat" 
    >定位</Button>
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, onMounted, ref } from 'vue';
import { waitTimeOut } from '@imengyu/imengyu-utils';
import { useTheme } from '@/components/theme/ThemeDefine';
import LightVillageApi from '@/api/light/LightVillageApi';
import MapApi from '@/api/map/MapApi';
import AppCofig from '@/common/config/AppCofig';
import Button from '@/components/basic/Button.vue';
import NoticeBar from '@/components/display/NoticeBar.vue';

const instance = getCurrentInstance();
const mapCtx = uni.createMapContext('prevMap', instance);
const currentAddress = ref<string>('');
const currentLonlat = ref<{ longitude: number, latitude: number }>({ 
  longitude: AppCofig.defaultLonLat[0], 
  latitude: AppCofig.defaultLonLat[1],
});
const emit = defineEmits(['getedCurrentLonlat']);

const props = defineProps<{
  startLonlat?: { longitude: number, latitude: number } | undefined;
}>();

const currentNoticeContent = ref('目前厦门市已被点亮一个社区，刚刚小亮贡献了10个光源，让湖里区点亮了一个社区');

const themeContext = useTheme();

function getCurrentLonlat() {
  uni.getLocation({
    type: 'wgs84',
    success: async (res) => {
      currentLonlat.value = {
        longitude: res.longitude,
        latitude: res.latitude,
      };
      const address = await MapApi.regeo(res.latitude, res.longitude);
      currentAddress.value = address.district;
      emit('getedCurrentLonlat', currentLonlat.value);
      mapCtx.moveToLocation({
        latitude: currentLonlat.value.latitude,
        longitude: currentLonlat.value.longitude,
      });
    },
  });
}

onMounted(async () => {
  if (props.startLonlat) {
    currentLonlat.value = props.startLonlat;
    mapCtx.moveToLocation({
      latitude: currentLonlat.value.latitude,
      longitude: currentLonlat.value.longitude,
    });
  }
  if (!props.startLonlat) {
    const res = await LightVillageApi.getIpAddress();
    currentLonlat.value = {
      longitude: Number(res.point.x),
      latitude: Number(res.point.y),
    };
    await waitTimeOut(100);
    currentAddress.value = res.address_detail.district;
    emit('getedCurrentLonlat', currentLonlat.value);
    mapCtx.moveToLocation({
      latitude: currentLonlat.value.latitude,
      longitude: currentLonlat.value.longitude,
    });
  }
});

</script>

<style lang="scss">
.mini-village-map {
  position: relative;
  width: 100%;
  height: 300rpx;
  border-radius: 20rpx;
  overflow: hidden;
  border-style: solid;
  border-width: 1px;

  .mini-village-map-map {
    width: 100%;
    height: 340rpx;
  }
}
</style>