当前位置：首页 > wzjs >正文

做一个同城便民信息网站怎么做关键词挖掘工具爱网

wzjs 2025/7/28 1:23:16

做一个同城便民信息网站怎么做,关键词挖掘工具爱网,南山网站建设公,马鞍山网站建设电话1、申请高德key 点击高德官网申请必须有key才能调用高德api 小提示：每日/每秒调用api次数有限，尽量不要循环调用。每日大概5000，每秒3次 2、查看文档高德官网天气api接口文档请求示例： https://restapi.amap.com/v3/weat…

1、申请高德key

点击高德官网申请

必须有key才能调用高德api

小提示：每日/每秒调用api次数有限，尽量不要循环调用。 每日大概5000，每秒3次

在这里插入图片描述

2、查看文档

高德官网天气api接口文档

请求示例：
https://restapi.amap.com/v3/weather/weatherInfo?key=你的key&city=130629&extensions=all

在这里插入图片描述

3、项目中使用

在项目 vite.config.ts 文件下配置反向代理

		server: {host: "0.0.0.0", // 服务器主机名，如果允许外部访问，可设置为"0.0.0.0"port: viteEnv.VITE_PORT,open: viteEnv.VITE_OPEN,cors: true,// https: false,// 代理跨域proxy: {"/api/weather": {target: "https://restapi.amap.com/v3/weather", // 高德apichangeOrigin: true,rewrite: path => path.replace(/^\/api\/weather/, "")},"/api": {target, // 后端接口网址changeOrigin: true,rewrite: path => path.replace(/^\/api/, "")}}},

接口调用
api 模块

import http from "@/api";// * 天气信息
const key = "00***fe6";
const city = "130629"; // 高德城市编码
export const getWeather = () => {return http.get("/weather/weatherInfo", { key, city, extensions: "all" });
};

页面使用
1.高德官网给的天气情况都是汉字，种类繁多，与产品沟通后只展示以下8种天气状况就OK，各位大佬在搬砖时要提前和PM沟通，可行则此方案亦可
2.免费api调用次数有每日上限问题，故采取缓存处理，每隔一小时请求一次api，望各位大佬知悉

import { useEffect } from "react";
import { connect } from "react-redux";
import moment from "moment";
import { useDispatch } from "@/redux";
import { setWeatherData } from "@/redux/modules/global/action";
import { getWeather } from "@/api/modules/dataScreen";
import feng from "@/assets/weatherIcons/风.png";
import duoyun from "@/assets/weatherIcons/多云.png";
import xue from "@/assets/weatherIcons/雪.png";
import wu from "@/assets/weatherIcons/雾.png";
import qing from "@/assets/weatherIcons/晴.png";
import yu from "@/assets/weatherIcons/雨.png";
import yin from "@/assets/weatherIcons/阴.png";import "./index.less";
/*** @description 天气预报* */
const iconWeatherMap: any = {风: ["有风","平静","微风","和风","清风","强风/劲风","疾风","大风","烈风","风暴","狂爆风","飓风","热带风暴","龙卷风"],多云: ["少云", "晴间多云", "多云"],雪: ["雪", "阵雪", "小雪", "中雪", "大雪", "暴雪", "小雪-中雪", "中雪-大雪", "大雪-暴雪", "冷"],雾: ["浮尘", "扬沙", "沙尘暴", "强沙尘暴", "雾", "浓雾", "强浓雾", "轻雾", "大雾", "特强浓雾"],晴: ["晴", "热"],雨夹雪: ["雨雪天气", "雨夹雪", "阵雨夹雪"],雨: ["阵雨","雷阵雨","雷阵雨并伴有冰雹","小雨","中雨","大雨","暴雨","大暴雨","特大暴雨","强阵雨","强雷阵雨","极端降雨","毛毛雨/细雨","雨","小雨-中雨","中雨-大雨","大雨-暴雨","暴雨-大暴雨","大暴雨-特大暴雨","冻雨"],阴: ["阴", "霾", "中度霾", "重度霾", "严重霾", "未知"]
};
const iconUrl: any = {风: feng,多云: duoyun,雪: xue,雾: wu,晴: qing,雨: yu,阴: yin
};
const getIcon = (name: string) => {for (const key in iconWeatherMap) {if (Object.prototype.hasOwnProperty.call(iconWeatherMap, key)) {const arr = iconWeatherMap[key];if (arr.includes(name)) return key;}}
};
const Weather = (props: any) => {const { setWeatherData } = props;const { weatherData } = props.global;const { weatherTime, dayWeather, temp } = weatherData;const dispatch = useDispatch();const fetchData = async () => {const { status, forecasts }: { [key: string]: any } = await getWeather();if (status === "1") {const { dayweather, nighttemp, daytemp } = forecasts[0]["casts"][0];setWeatherData({dayWeather: dayweather,temp: `${nighttemp} - ${daytemp}`,weatherTime: moment().format("YYYY-MM-DD HH:mm:ss")});} else dispatch(setWeatherData({ ...weatherData, dayweather: "晴", temp: "" }));};useEffect(() => {const time: number = 1 * 60; // 1小时const now = moment();if (!weatherTime) fetchData();else if (now.diff(moment(weatherTime), "minutes") >= time) fetchData();}, []);return (<div className="weather"><img src={iconUrl[getIcon(dayWeather) || "晴"]} alt="" /><div className="weather-info"><div>{dayWeather || ""}</div><div className="temp">{temp ? temp + "℃" : ""}</div></div></div>);
};
const mapStateToProps = (state: any) => state;
export default connect(mapStateToProps, { setWeatherData })(Weather);