闲来无事，利用摸鱼时间实现实时天气的小功能
目录登录 高德开放平台控制台，如果没有开发者账号，请 注册开发者。创建 key，进入应用管理，创建新应用，新应用中添加 key，服务平台选择 Web端(JS API)。获取 key 和密钥获取当前城市定位通过定位获取城市名称、区域编码，查询目标城市/区域的实时天气状况效果图这里样式我就不做处理了，地图可以不用做展示，只需要拿到获取到天气的结果，结合自己的样式展示就可以了，未来天气可以结合echarts进行展示，页面效果更佳
实现登录高德开放平台控制台创建 key这里应用名称可以随便取（个人建议功能名称或者项目称）
3.获取 key 和密钥
4.获取当前城市定位
首先，先安装依赖
npm install @amap/amap-jsapi-loader --save
或者
pnpm add @amap/amap-jsapi-loader --save
页面使用时引入即可 import AMapLoader from "@amap/amap-jsapi-loader"
/** 1. 调用AMapLoader.load方法，通过传入一个对象作为参数来指定加载地图时的配置信息。 * - key: 申请好的Web端开发者Key，是必填项，用于授权您的应用程序使用高德地图API。 * - version: 指定要加载的JSAPI版本，不指定时默认为1.4.15。 * - plugins: 需要使用的插件列表，如比例尺、缩放控件等。 */ function initMap() { AMapLoader.load({ key: "申请好的Web端开发者Key", // 申请好的Web端开发者Key，首次调用 load 时必填 version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15 plugins: [ "AMap.ToolBar", "AMap.Scale", "AMap.HawkEye", "AMap.MapType", "AMap.Geolocation", "AMap.Geocoder", "AMap.Weather", "AMap.CitySearch", "AMap.InfoWindow", "AMap.Marker", "AMap.Pixel", ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等 }) .then((AMap) => { map.value = new AMap.Map("container", { //设置地图容器id resizeEnable: true, viewMode: "3D", //是否为3D地图模式 zoom: 10, //初始化地图级别 center: locationArr.value, //初始化地图中心点位置 }); getGeolocation(AMap); getCitySearch(AMap, map.value); }) .catch((e) => { console.log(e); });}// 浏览器定位const getGeolocation = (AMap: any) => { const geolocation = new AMap.Geolocation({ enableHighAccuracy: true, //是否使用高精度定位，默认:true timeout: 1000, //超过10秒后停止定位，默认：5s position: "RB", //定位按钮的停靠位置 offset: [10, 20], //定位按钮与设置的停靠位置的偏移量，默认：[10, 20] zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点 }); map.value.addControl(geolocation); geolocation.getCurrentPosition(function (status: string, result: any) { if (status == "complete") { onComplete(result); } else { onError(result); } });};// IP定位获取当前城市信息const getCitySearch = (AMap: any, map: any) => { const citySearch = new AMap.CitySearch(); citySearch.getLocalCity(function ( status: string, result: { city: string; info: string; } ) { if (status === "complete" && result.info === "OK") { console.log( " ~ file: map-container.vue:88 ~ getCitySearch ~ result:", result ); // 查询成功，result即为当前所在城市信息 getWeather(AMap, map, result.city); } });};onMounted(() => { initMap();});5.通过定位获取城市名称、区域编码，查询目标城市/区域的实时天气状况
const getWeather = (AMap: any, map: any, city: string) => { const weather = new AMap.Weather(); weather.getLive( city, function ( err: any, data: { city: string; weather: string; temperature: string; windDirection: string; windPower: string; humidity: string; reportTime: string; } ) { if (!err) { const str = []; str.push("<h4 >实时天气" + "</h4><hr>"); str.push("<p>城市/区：" + data.city + "</p>"); str.push("<p>天气：" + data.weather + "</p>"); str.push("<p>温度：" + data.temperature + "℃</p>"); str.push("<p>风向：" + data.windDirection + "</p>"); str.push("<p>风力：" + data.windPower + " 级</p>"); str.push("<p>空气湿度：" + data.humidity + "</p>"); str.push("<p>发布时间：" + data.reportTime + "</p>"); const marker = new AMap.Marker({ map: map, position: map.getCenter(), }); const infoWin = new AMap.InfoWindow({ content: '<div>完整代码 <template> <div id="container"></div></template><script setup lang="ts">import AMapLoader from "@amap/amap-jsapi-loader";import { ref, onMounted, watch, reactive } from "vue";const props = defineProps({ search: { type: String, default: "杭州市", },});const isFalse = ref(false);const map = ref<any>(null);let locationArr = ref<any>();watch( () => props.search, (newValue) => { console.log("search", newValue); initMap(); });function initMap() { AMapLoader.load({ key: "申请好的Web端开发者Key", // 申请好的Web端开发者Key，首次调用 load 时必填 version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15 plugins: [ "AMap.ToolBar", "AMap.Scale", "AMap.HawkEye", "AMap.MapType", "AMap.Geolocation", "AMap.Geocoder", "AMap.Weather", "AMap.CitySearch", "AMap.InfoWindow", "AMap.Marker", "AMap.Pixel", ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等 }) .then((AMap) => { map.value = new AMap.Map("container", { //设置地图容器id resizeEnable: true, viewMode: "3D", //是否为3D地图模式 zoom: 10, //初始化地图级别 center: locationArr.value, //初始化地图中心点位置 }); getGeolocation(AMap); getCitySearch(AMap, map.value); }) .catch((e) => { console.log(e); });}// 浏览器定位const getGeolocation = (AMap: any) => { const geolocation = new AMap.Geolocation({ enableHighAccuracy: true, //是否使用高精度定位，默认:true timeout: 1000, //超过10秒后停止定位，默认：5s position: "RB", //定位按钮的停靠位置 offset: [10, 20], //定位按钮与设置的停靠位置的偏移量，默认：[10, 20] zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点 }); map.value.addControl(geolocation); geolocation.getCurrentPosition(function (status: string, result: any) { if (status == "complete") { onComplete(result); } else { onError(result); } });};// IP定位获取当前城市信息const getCitySearch = (AMap: any, map: any) => { const citySearch = new AMap.CitySearch(); citySearch.getLocalCity(function ( status: string, result: { city: string; info: string; } ) { if (status === "complete" && result.info === "OK") { console.log( " ~ file: map-container.vue:88 ~ getCitySearch ~ result:", result ); // 查询成功，result即为当前所在城市信息 getWeather(AMap, map, result.city); } });};// 天气const getWeather = (AMap: any, map: any, city: string) => { const weather = new AMap.Weather(); weather.getLive( city, function ( err: any, data: { city: string; weather: string; temperature: string; windDirection: string; windPower: string; humidity: string; reportTime: string; } ) { console.log(" ~ file: map-container.vue:96 ~ .then ~ data:", data); if (!err) { const str = []; str.push("<h4 >实时天气" + "</h4><hr>"); str.push("<p>城市/区：" + data.city + "</p>"); str.push("<p>天气：" + data.weather + "</p>"); str.push("<p>温度：" + data.temperature + "℃</p>"); str.push("<p>风向：" + data.windDirection + "</p>"); str.push("<p>风力：" + data.windPower + " 级</p>"); str.push("<p>空气湿度：" + data.humidity + "</p>"); str.push("<p>发布时间：" + data.reportTime + "</p>"); const marker = new AMap.Marker({ map: map, position: map.getCenter(), }); const infoWin = new AMap.InfoWindow({ content: '<div>作者：快乐是Happy链接：https://juejin.cn/post/7316746866040619035
