JS獲取經(jīng)緯度并根據(jù)經(jīng)緯度得到城市信息簡單示例
前言
在JavaScript中,獲取經(jīng)緯度通常需要使用定位服務(wù),比如HTML5的Geolocation API。然而拿到坐標(biāo)后,將經(jīng)緯度轉(zhuǎn)換為城市信息,則需要使用逆地理編碼服務(wù)接口,比如百度或者高德的 API, 但是他們收費(fèi)都很高, 我們可以使用一些便宜的接口, 效果一樣的。
以下是一個(gè)簡單的示例:
一、獲取經(jīng)緯度
首先,你需要使用Geolocation API獲取用戶的經(jīng)緯度。這需要用戶的許可,所以它是一個(gè)異步操作。以下是如何獲取經(jīng)緯度的代碼:
navigator.geolocation.getCurrentPosition(function(position) { var lat = position.coords.latitude; var lon = position.coords.longitude; console.log("Latitude: " + lat); console.log("Longitude: " + lon); }, function(error) { console.log("Error occurred. Error code: " + error.code); // error.code 可以是:0, 1,或2 });
二、根據(jù)經(jīng)緯度獲取城市信息
然后,你可以使用易客云API將經(jīng)緯度轉(zhuǎn)換為城市信息。以下是使用此API的示例代碼:
<!-- 此示例需要注冊(cè)api賬號(hào) https://yikeapi.com/index/geocode --> <!DOCTYPE html> <html lang="zh-CN" style="height: 100%"> <head> <meta charset="utf-8"> </head> <body style="height: 100%; margin: 0"> <div id="container" style="height: 100%"> </div> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"> </script> <script type="text/javascript"> $.get('http://apia.yikeapi.com/geocode/?appid=43656176&appsecret=I42og6Lm&output=json&location=116.437039,39.999664', function(res) { console.log(res); var json = JSON.parse(res); if (json.errcode == 0) { console.log('當(dāng)前所在城市:' + json.regeocode.addressComponent.district); } }); </script> </body> </html>
輸出結(jié)果
{“errcode”:0,“errmsg”:“success”,“nums”:147,“regeocode”:{“addressComponent”:{“province”:“北京市”,“city”:“北京市”,“district”:“朝陽區(qū)”,“adcode”:“110105”}}}
當(dāng)前所在城市:朝陽區(qū)
易客云的逆地理編碼接口返回的json結(jié)構(gòu)和百度高德一模一樣, 但是只支持區(qū)縣級(jí), 每日5萬次級(jí)的僅需要三位數(shù), 比5萬便宜多啦??, 如果不是街道級(jí)定位要求, 那可以用這個(gè)
接口返回JSON
{ "errcode":0, "errmsg":"success", "nums":140, "regeocode":{ "addressComponent":{ "province":"北京市", "city":"北京市", "district":"朝陽區(qū)", "adcode":"110105" } } }
另外,也請(qǐng)注意,上述操作需要用戶允許瀏覽器訪問地理位置信息,這在某些瀏覽器設(shè)置或用戶隱私設(shè)置中可能被禁用或受限。
總結(jié)
到此這篇關(guān)于JS獲取經(jīng)緯度并根據(jù)經(jīng)緯度得到城市信息的文章就介紹到這了,更多相關(guān)JS獲取經(jīng)緯度內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
js將long日期格式轉(zhuǎn)換為標(biāo)準(zhǔn)日期格式實(shí)現(xiàn)思路
本文為大家詳細(xì)介紹下js將long日期格式轉(zhuǎn)換為標(biāo)準(zhǔn)日期格式,感興趣的朋友可以參考下哈,希望可以幫助到你2013-04-04Javascript實(shí)現(xiàn)鼠標(biāo)移入方向感知
這篇文章主要為大家詳細(xì)介紹了Javascript實(shí)現(xiàn)鼠標(biāo)移入方向感知,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-06-06前端發(fā)布緩存導(dǎo)致白屏幾種解決方案總結(jié)
這篇文章主要介紹了前端發(fā)布緩存導(dǎo)致白屏的幾種解決方案,文章還介紹了Jenkins發(fā)布流程優(yōu)化和使用版本號(hào)方案,以減少發(fā)布緩存問題,每種方案都有其優(yōu)缺點(diǎn),需要根據(jù)實(shí)際情況進(jìn)行選擇和調(diào)整,需要的朋友可以參考下2025-04-04javascript前端埋點(diǎn)上報(bào)的幾種方式
本文將介紹前端埋點(diǎn)上報(bào)的幾種常見方式,并詳細(xì)闡述如何在項(xiàng)目中運(yùn)用這些方式進(jìn)行數(shù)據(jù)上報(bào),以幫助開發(fā)者更好地進(jìn)行數(shù)據(jù)收集和分析,感興趣的可以了解一下2023-11-11Javascript基礎(chǔ)教程之比較null和undefined值
這篇文章主要介紹了Javascript基礎(chǔ)教程之比較null和undefined值的相關(guān)知識(shí),非常不錯(cuò),具有參考借鑒價(jià)值,感興趣的朋友一起學(xué)習(xí)吧2016-05-05JavaScript初學(xué)者應(yīng)注意的七個(gè)細(xì)節(jié)小結(jié)
每種語言都有它特別的地方,對(duì)于JavaScript來說,使用var就可以聲明任意類型的變量,這門腳本語言看起來很簡單,然而想要寫出優(yōu)雅的代碼卻是需要不斷積累經(jīng)驗(yàn)的2012-01-01JS 實(shí)現(xiàn)10進(jìn)制轉(zhuǎn)換36進(jìn)制的示例代碼
這篇文章主要介紹了JS實(shí)現(xiàn)10進(jìn)制轉(zhuǎn)換36進(jìn)制,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04