快捷導(dǎo)航

Vue實(shí)現(xiàn)大屏獲取當(dāng)前所處城市及當(dāng)?shù)靥鞖獾木唧w方案

更新時(shí)間：2026年02月10日 08:42:37 作者：李劍一

文章介紹了如何在大屏項(xiàng)目中展示城市名稱和實(shí)時(shí)天氣信息,通過(guò)瀏覽器的GeolocationAPI獲取經(jīng)緯度,然后使用逆地理編碼服務(wù)獲取城市名稱,文章還提到了使用Open-Meteo獲取天氣信息,該服務(wù)免費(fèi)且支持全球經(jīng)緯度的實(shí)時(shí)天氣和未來(lái)7天預(yù)報(bào),需要的朋友可以參考下

之前做過(guò)的大屏項(xiàng)目一般是在內(nèi)網(wǎng)環(huán)境中使用，所以一般頂部不牽扯展示城市和天氣。但是這次做的是放在外網(wǎng)的，所以簡(jiǎn)單實(shí)現(xiàn)一下展示城市名稱和當(dāng)前實(shí)時(shí)天氣信息。

獲取當(dāng)前所處位置

獲取當(dāng)前定位可以通過(guò)瀏覽器原生的Geolocation API獲取經(jīng)緯度信息。

function getLocation() {
	return new Promise((resolve, reject) => {
		if (navigator.geolocation) {
			navigator.geolocation.getCurrentPosition(
				(position) => {
					const lat = position.coords.latitude;
					const lon = position.coords.longitude;
					resolve({lat, lon});
					console.log('當(dāng)前位置:', lat, lon);
				},
				(error) => {
					console.error('無(wú)法獲取位置:', error.message);
					reject(error);
				}
			);
		}
	})
}

需要注意，Geolocation API是異步的，所以這里用 Promise 進(jìn)行了簡(jiǎn)單的封裝。另外這里只能獲取到經(jīng)緯度，無(wú)法獲取到所在城市名稱，需要通過(guò)逆地理編碼的方式實(shí)現(xiàn)。

逆地理編碼

目前國(guó)內(nèi)主要是御三家提供逆地理編碼的服務(wù)，但是都需要進(jìn)行付費(fèi)，不過(guò)唯一可以慶幸的是各家都有免費(fèi)額度。

如果你的大屏部署在外網(wǎng)，國(guó)外的Nominatim是完全免費(fèi)的，咱們這邊目前是無(wú)法訪問(wèn)的。官網(wǎng)地址也放一個(gè)nominatim.openstreetmap.org。

這里我以騰訊的逆地理編碼服務(wù)為例子簡(jiǎn)單寫(xiě)一下：

async function getCityName(lat, lon) {
	const sig = CryptoJs.MD5(`/ws/geocoder/v1/?key=${你的key}&location=${lat},${lon}${你的簽名}`).toString();
	const {result} = await request.get(`/tencent/ws/geocoder/v1/?key=${你的key}&location=${lat},${lon}&sig=${sig}`);
	return `${result.address_component.city}-${result.address_component.district}`
}

這里需要代理一下，我這里的代理如下：

'/tencent': {
    target: 'https://apis.map.qq.com',
    changeOrigin: true,
    rewrite: (path) => path.replace(/^\/tencent/, '')
},

獲取天氣

天氣信息目前咱們這邊有和風(fēng)天氣，提供了一定的免費(fèi)額度。

但是我在網(wǎng)上找到一個(gè)外面的，但是咱們這邊能訪問(wèn)到的Open-Meteo，官方地址也放一下open-meteo.com。

特點(diǎn)如下：

無(wú)需注冊(cè)、無(wú) API Key、無(wú)調(diào)用限制
支持全球經(jīng)緯度實(shí)時(shí)天氣 + 未來(lái)7天預(yù)報(bào)
數(shù)據(jù)來(lái)源：歐洲中期天氣預(yù)報(bào)中心（ECMWF）等權(quán)威機(jī)構(gòu)

唯一不好的一點(diǎn)在于返回的都是英文數(shù)據(jù)，需要認(rèn)為的轉(zhuǎn)成中文。

// 部分天氣中英文映射
const WEATHER_CODE_MAP = {
	0: { en: 'Clear sky', zh: '晴' },
	1: { en: 'Mainly clear', zh: '晴轉(zhuǎn)多云' },
	2: { en: 'Partly cloudy', zh: '多云' },
	3: { en: 'Overcast', zh: '陰' },
	45: { en: 'Fog', zh: '霧' },
	48: { en: 'Depositing rime fog', zh: '凍霧' },
	51: { en: 'Drizzle: Light', zh: '小雨' },
	53: { en: 'Drizzle: Moderate', zh: '中雨' },
	55: { en: 'Drizzle: Dense', zh: '大雨' },
	61: { en: 'Rain: Slight', zh: '小雨' },
	63: { en: 'Rain: Moderate', zh: '中雨' },
	65: { en: 'Rain: Heavy', zh: '大雨' },
	71: { en: 'Snow fall: Slight', zh: '小雪' },
	73: { en: 'Snow fall: Moderate', zh: '中雪' },
	75: { en: 'Snow fall: Heavy', zh: '大雪' },
	95: { en: 'Thunderstorm', zh: '雷陣雨' },
	96: { en: 'Thunderstorm with slight hail', zh: '雷陣雨伴小冰雹' },
	99: { en: 'Thunderstorm with heavy hail', zh: '雷陣雨伴大冰雹' }
};

// 獲取天氣
async function getWeather(lat, lon) {
	const result = await request.get(`https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lon}&current_weather=true`);
	const code = result.current_weather.weathercode;
	return WEATHER_CODE_MAP[code] || {en: 'Unknown', zh: '未知'};
}

這個(gè)是不需要代理的，因?yàn)?strong>Open-Meteo本身支持CORS。