前言：

        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()
	})