uniapp-vue3项目中引入高德地图的天气展示

前言：

        uniapp-vue3项目中引入高德地图的天气展示

效果：

操作步骤：

1、页面上用定义我们的

当前天气信息：<view></view>

2、引入我们的map文件

<script setup>import amapFile from '../../libs/amap-wx.js'

3、使用我们的高德地图信息

import { reactive } from 'vue';// 接口返回也是这个结构
let mapTqObj = reactive({city:{data: "杨浦区",text: "城市"},humidity:{data: "56%",text: "湿度"},liveData:{adcode: "310110",city: "杨浦区",humidity: "56",humidity_float: "56.0",province: "上海",reporttime: "2025-05-15 16:01:08",temperature: "27",temperature_float: "27.0",weather: "阴",winddirection: "东北",windpower: "≤3",},temperature:{data: "27",text: "温度"},weather:{data: "阴",text: "天气"},winddirection:{data: "东北风",text: "风向"},windpower:{data: "≤3级",text: "风力"}})

4、获取天气方法

let initMap = function(){const myAmapFun = new amapFile.AMapWX({key: 'xxx', // 你的高德地图API Key});console.log('myAmapFun',myAmapFun)myAmapFun.getWeather({success: function(data){//成功回调console.log('天气信息',data)mapObj = data},fail: function(info){//失败回调console.log(info)}})}

5、调用方法

onShow(()=>{initMap()initData()})