利用JavaScript獲取用戶IP屬地方法詳解

第利用JavaScript獲取用戶IP屬地方法詳解目錄寫在前面嘗試一：navigator.geolocation嘗試二：sohu的接口嘗試三：百度地圖的接口寫在后面

寫在前面

想要像一些平臺(tái)那樣顯示用戶的位置信息，例如某省市那樣。那么這是如何做到的，據(jù)說(shuō)這個(gè)位置信息的準(zhǔn)確性在通信網(wǎng)絡(luò)運(yùn)營(yíng)商那里？先不管，先實(shí)踐嘗試下能不能獲取。

嘗試一：navigator.geolocation

嘗試了使用navigator.geolocation，但未能成功拿到信息。

getGeolocation(){

if('geolocation'innavigator){

/*地理位置服務(wù)可用*/

console.log('地理位置服務(wù)可用')

navigator.geolocation.getCurrentPosition(function(position){

console.dir('回調(diào)成功')

console.dir(position)//沒(méi)有輸出

console.dir(position.coords.latitude,position.coords.longitude)

},function(error){

console.error(error)

}else{

/*地理位置服務(wù)不可用*/

console.error('地理位置服務(wù)可用')

}

嘗試二：sohu的接口

嘗試使用/cityjsonie=utf-8獲取用戶位置信息，成功獲取到信息，信息樣本如下：

{"cip":"1","cid":"440000","cname":"廣東省"}

//需要做跨域處理

getIpAndAddressSohu(){

//config是配置對(duì)象，可按需設(shè)置，例如responseType，headers中設(shè)置token等

constconfig={

headers:{

Accept:'application/json',

'Content-Type':'application/json;charset=UTF-8',

axios.get('/apiSohu/cityjsonie=utf-8',config).then(res={

console.log(res.data)//varreturnCitySN={"cip":"0","cid":"440000","cname":"廣東省"};

constinfo=res.data.substring(19,res.data.length-1)

console.log(info)//{"cip":"0","cid":"440000","cname":"廣東省"}

this.ip=JSON.parse(info).cip

this.address=JSON.parse(info).cname

}

調(diào)試的時(shí)候，做了跨域處理。

proxy:{

'/apiSohu':{

target:'/',//localhost=target

changeOrigin:true,

pathRewrite:{

'/apiSohu':'/'

}

下面是一張獲取到位置信息的效果圖：

嘗試三：百度地圖的接口

需要先引入百度地圖依賴，有一個(gè)參數(shù)ak需要注意，這需要像管理方申請(qǐng)。例如下方這樣

scriptsrc="/apiv=2.0ak=3ufnnh6aD5CST"/script

getLocation(){/*獲取當(dāng)前位置（瀏覽器定位）*/

const$this=this;

vargeolocation=newBMap.Geolocation();//返回用戶當(dāng)前的位置

geolocation.getCurrentPosition(function(r){

if(this.getStatus()==BMAP_STATUS_SUCCESS){

$this.city=r.address.city;

console.log(r.address)//{city:'廣州市',city_code:0,district:'',province:'廣東省',street:'',…}

}

functiongetLocationBaiduIp(){/*獲取用戶當(dāng)前位置（ip定位）*/

functionmyFun(result){

constcityName=;

console.log(result)//{center:O,level:12,name:'廣州市',code:257}

varmyCity=newBMap.LocalCity();

myCity.get(myFun);

}

成功用戶的省市位置，以及經(jīng)緯度坐標(biāo)，但會(huì)先彈窗征求用戶意見。

寫在后面

嘗試結(jié)果不太理想，sohu的接口內(nèi)部是咋實(shí)現(xiàn)的，這似乎沒(méi)有彈起像下面那樣的征詢用戶意見的提示。

而在navigator.geolocation和BMap.