vue3中使用高德地图天气信息

news2024/11/15 4:07:09

注册一个key 和安全密钥
在这里插入图片描述

index.html中使用script标签引入生成的key和秘钥

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!--高德地图-->
    <script type="text/javascript">
      window._AMapSecurityConfig = {
        securityJsCode: "ebb5dc84afd9b5f441ca05e1f831e842",
      };
    </script>
    <script
      type="text/javascript"
      src="https://webapi.amap.com/maps?v=1.4.15&key=267b66fc2a7199f2435f3e515d270db3"
    ></script>
    <title>XXXX</title>
  </head>

<template>
  <div style="color: #fff">
    <div class="Wd_f">
      <P class="p-left">
        风速：
        {{ weatherObject.windPower }}
      </P>
      <P class="p-r">
        温度：
      
        {{ weatherObject.temperature }}
      </P>
    </div>

    <div class="font-zise">
      <span>
        湿度
        <br/>
        <i style="color: #24d256; font-size: 22px;"> {{ weatherObject.humidity }}</i>
       
      </span>
      <span>
        风向
        <br/>
        <i style="color: #24d256; font-size: 22px;">   {{ weatherObject.windDirection }}</i>
       
      </span>
      <span>
        天气
        <br/>
        <i style="color: #24d256; font-size: 22px;"> {{ weatherObject.weather }}</i>
      </span>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";

onMounted(() => {
  getCity();
});

let weatherObject = ref({
  city: "",
  humidity: "",
  info: "",
  province: "",
  reportTime: "",
  temperature: "",
  weather: "",
  windDirection: "",
  windPower: "",
});

let city = ref("");

function getCity() {
  AMap.plugin("AMap.CitySearch", function () {
    var citySearch = new AMap.CitySearch();
    citySearch.getLocalCity(function (status, result) {
      if (status === "complete" && result.info === "OK") {
        city.value = result.city;
        getWeather(city.value);
      }
    });
  });
}

// 获取天气
function getWeather(city) {
  //加载天气查询插件
  AMap.plugin("AMap.Weather", function () {
    let weather = new AMap.Weather();
    weather.getLive(city, function (err, data) {
      console.log(err, data);
      if (data.info == "OK") {
        weatherObject.value = { ...data };
      }
    });
  });
}
</script>