之前做过的大屏项目一般是在内网环境中使用，所以一般顶部不牵扯展示城市和天气。话说回来，这次做的是放在外网的。所以简单实现一下展示城市名称和当前实时天气信息。

获取当前所处位置

获取当前定位可以通过浏览器原生的Geolocation API获取经纬度信息。

function getLocation {
return new Promise => {
if {
navigator.geolocation.getCurrentPosition(
=> {
const lat = position.coords.latitude;const lon = position.coords.longitude;resolve，console.log;},=> {
console.error;reject，}
);}
})
}

需要注意，Geolocation API是异步的。所以这里用 Promise 进行了简单的封装。对了这里只能获取到经纬度，无法获取到所在城市名称。需要通过逆地理编码的方式实现。其实，

逆地理编码

目前国内主要是御三家提供逆地理编码的服务。但是都需要进行付费，但是唯一可以庆幸的是各家都有免费额度。

如果你的大屏部署在外网。国外的Nominatim是完全免费的，咱们这边目前是无法访问的。

这里我以腾讯的逆地理编码服务为例子简单写一下：

async function getCityName {
const sig = CryptoJs.MD5.toString;const {result} = await request.get;老实说，return `${result.address_component.city}-${result.address_component.district}`
}

这里需要代理一下我这里的代理如下：

'/tencent': {
再看target。'https://apis.map.qq.com',changeOrigin: true,rewrite: => path.replace
},

获取天气

天气信息目前咱们这边有和风天气，提供了一定的免费额度。

我在网上找到一个外面的，但是咱们这边能访问到的Open-Meteo官方地址也放一下。

从特点如下来看，

• 无需注册、无 API Key、无调用限制
• 支持全球经纬度实时天气 + 未来7天预报
• 数据来源的观点是。欧洲中期天气预报中心等权威机构

唯一不好的一点在于返回的都是英文数据，需要认为的转成中文。

// 部分天气中英文映射
const WEATHER_CODE_MAP = {
: { en: 'Clear sky',zh: '晴' },: { en: 'Mainly clear',zh: '晴转多云' },: { en: 'Partly cloudy',zh: '多云' },: { en: 'Overcast',zh: '阴' },: { en: 'Fog',zh: '雾' },: { en: 'Depositing rime fog',zh: '冻雾' },: { en: 'Drizzle: Light',zh: '小雨' },: { en: 'Drizzle: Moderate',zh: '中雨' },: { en: 'Drizzle: Dense'。zh: '大雨' },: { en: 'Rain: Slight',zh: '小雨' },: { en: 'Rain: Moderate',zh: '中雨' },: { en: 'Rain: Heavy',zh: '大雨' },: { en: 'Snow fall: Slight',zh: '小雪' },: { en: 'Snow fall: Moderate',zh: '中雪' },: { en: 'Snow fall: Heavy',zh:'大雪'},: { en:'Thunderstorm',zh:'雷阵雨'},: { en:'Thunderstorm with slight hail',zh:'雷阵雨伴小冰雹'},: { en:'Thunderstorm with heavy hail',zh:'雷阵雨伴大冰雹'}
};

// 获取天气
async function getWear {
const result = await request.get;const code = result.current_wear.wearcode;话说回来，return WEATHER_CODE_MAP || {en:'Unknown'。zh:'未知'}，}

This does not require a proxy because Open-Meteo itself supports CORS.

获取经纬度和城市信息，还有天气信息在技术上没什么难度。

Mainly concern is that many services are paid;for personal experimentation it's fine,but for a production environment you must guard against malicious overuse.

I’ve also seen a big-screen implementation that overlays a mask on a satellite map and shows raindrop effects when it rains—very cool. I’ll share implementation later.