vue3+ts 获取定位和是天气

<template>
  <div>
    <div>城市：{{ _data.city }}</div>
    <div>日期：{{ _data?.casts[0].date }}</div>
    <div>{{ week[_data?.casts[0].week] }}</div>
    <div>温度：{{ _data?.casts[0].daytemp }}°</div>
    <div>天气状况：{{ _data?.casts[0].dayweather }}</div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

const week = ref({
  '1': '星期一',
  '2': '星期二',
  '3': '星期三',
  '4': '星期四',
  '5': '星期五',
  '6': '星期六',
  '7': '星期日'
});

const _data = ref({
  city: '',
  casts: [{}]
});

const GetLocation = () => {
  fetch('https://restapi.amap.com/v3/ip?key=自己的key')
    .then((res) => {
      return res.json();
    })
    .then((data) => {
      if (data.status == '1') {
        getWeathData(data.adcode);
      }
    })
    .catch((err) => {
      console.log(err);
    });
};
const getWeathData = (cityCode) => {
  //key--请求服务权限标识
  //city--城市编码
  //output--返回格式
  //extensions--气象类型    可选值：base/all---base:返回实况天气---all:返回预报天气
  fetch(`https://restapi.amap.com/v3/weather/weatherInfo?key=自己的key&city=${cityCode}&extensions=all&output=JSON`)
    .then((res) => {
      return res.json();
    })
    .then((data) => {
      if (data.status == '1') {
        _data.value = { ...data?.forecasts[0] };
      }
    })
    .catch((err) => {
      console.log(err);
    });
};

onMounted(() => {
  GetLocation();
});
</script>

<style lang="scss" scoped>
</style>