快捷導(dǎo)航

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

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

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

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

獲取當(dāng)前定位可以通過瀏覽器原生的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('無法獲取位置:', error.message);
					reject(error);
				}
			);
		}
	})
}

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

逆地理編碼

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

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

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

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)天氣，提供了一定的免費額度。

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

特點如下：

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

唯一不好的一點在于返回的都是英文數(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: '未知'};
}

這個是不需要代理的，因為Open-Meteo本身支持CORS。