vue3引入高德天气

### 在 Vue3 中引入并使用高德地图天气 API #### 安装依赖包 为了能够在 Vue3 项目中顺利集成高德地图及其天气插件，需先安装 `vue-amap` 组件库。 ```bash npm install vue-amap --save ``` #### 引入与初始化配置 完成上述操作之后，在项目的入口文件（通常是 main.js 或者类似的启动脚本），按照如下方式来加载和初始化： ```javascript import { createApp } from 'vue'; import App from './App.vue'; // 引入vue-amap组件库 import VueAMap from '@vuemap/vue-amap-taro'; const app = createApp(App); app.use(VueAMap); VueAMap.initAMapApiLoader({ key: "此处替换为自己的key", // 替换成申请到的应用程序密钥 plugin: ["AMap.Weather"], // 加载所需的插件列表，这里加入了Weather服务 }); app.mount('#app'); ``` 注意这里的 `plugin` 数组内包含了 `"AMap.Weather"` 这一项，这表明将会加载来自高德的地图天气查询功能[^1]。 #### 使用 Weather Service 获取实时气象数据 一旦完成了基础设置工作，则可以在任何页面或组件内部通过下面的方式调用获取当前定位位置的即时天气状况： ```html <template> <div id="weatherInfo"> {{ weatherData }} </div> </template> <script setup lang="ts"> import { ref, onMounted } from 'vue'; let AMap; let weather; onMounted(() => { window._AMapSecurityConfig = { securityJsCode: '安全码', }; const loadScript = document.createElement('script'); loadScript.src = 'https://webapi.amap.com/maps?v=2.0&callback=initMap&key=' + process.env.VUE_APP_AMAP_KEY; document.head.appendChild(loadScript); function initMap() { AMap = window.AMap; new Promise((resolve) => setTimeout(resolve, 50)).then(() => (window.weather = new AMap.Service('weather')) ); } }); </script> ``` 此段代码展示了如何创建一个简单的模板用于显示返回的数据，并定义了一个生命周期钩子函数 `onMounted()` 来确保当组件挂载完成后立即执行必要的逻辑处理。其中还涉及到动态加载外部 JavaScript 文件以及延迟实例化 `AMap.Service('weather')` 对象以等待 SDK 脚本完全加载完毕后再进行下一步动作[^2]。 最后一步就是实际发起请求获得具体的天气详情了： ```typescript async getWeatherDetails(): void{ try { let result = await this.weather.getLive({ city: '北京' }); console.log(result.now); // 输出最新的实况天气信息 } catch(error){ console.error("Failed to fetch live weather data.", error); } } ``` 这段 TypeScript 函数演示了怎样利用之前准备好的 `this.weather` 实例去异步检索特定城市的最新天气状态，并打印出来供调试查看[^3]。