1.方法:
查看ip內(nèi)容:http://pv.sohu.com/cityjson?ie=utf-8
【1】js獲取ip地址:
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
<script type="text/javascript">
console.log(returnCitySN["cip"]+','+returnCitySN["cname"])
</script>
【2】uni-app獲取ip地址:(此方法會跨域報錯=>后續(xù)找到解決方法再補充)
uni.request({
url:'http://pv.sohu.com/cityjson?ie=utf-8',
method:'POST',
success: (res) => {
const reg = /\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}/;
let ip = reg.exec(res.data);
console.log(ip[0]);
}
})
【3】使用H5自帶的獲取位置
1、部分手機和瀏覽器不太支持這個API，還會有警告報錯，所以感覺這個API有點雞肋，不太能用得上。
2、如果需要展示地區(qū)名稱，還需要另外引入類似百度地圖的第三方平臺提供的js進行經(jīng)緯度轉(zhuǎn)換地區(qū)名稱等。
3、瀏覽器地址必須是https的，不然不支持。
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition((res)=> {
console.log(res);//這里會返回經(jīng)緯度，然后還要通過經(jīng)緯度轉(zhuǎn)換地區(qū)名稱
});
}
【4】使用百度地圖獲取位置
1、在百度地圖開發(fā)平臺注冊賬號，并申請ak密鑰
2、在頁面中引用百度地圖js，(vue項目就在index.html中引用)
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=qI3333RVsdret2A9999VC858Q&s=1"</script>
</body>
3、在頁面中寫入下面代碼（可以直接返回經(jīng)緯度和省市區(qū)名稱等）：
mounted() {
//獲取當前城市
var geolocation=new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
var city=r.address.city//返回當前城市
that.currCity = city;
})
},
【5】微信js-sdk自帶的API
登錄微信平臺獲取appid和秘鑰
配置服務(wù)器信息，和js接口安全域名、網(wǎng)頁授權(quán)域名等
把配置信息文件.txt放到配置的服務(wù)器下面
查看所有的接口權(quán)限，是否有獲取用戶地理位置
通過調(diào)接口的方式獲取時間戳，簽名等
wx.ready(function ()
{
wx.checkJsApi(
{
jsApiList : ['getLocation'],
success : function (res)
{
if (!res.checkResult.getLocation) {
alert('暫不支持獲取地理位置接口，請升級微信版本！');
return;
}
}
}) wx.getLocation(
{
success : function (res)
{
console.log(res)//地理位置信息都在這里
},
cancel : function (res)
{
alert('用戶拒絕授權(quán)位置信息！');
}
})
})
2.案例:
文章來源：http://www.zghlxwxcb.cn/news/detail-525870.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title><%= htmlWebpackPlugin.options.title %></title>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'
})
</script>
<link rel="stylesheet" href="<%= htmlWebpackPlugin.options.baseUrl %>static/index.css" />
<!-- 引入外部js -->
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
<script type="text/javascript">
// 獲取ip及地址
console.log(returnCitySN["cip"]+','+returnCitySN["cname"],'ip及其地址')
localStorage.setItem('IPAddress', returnCitySN["cname"]) //存儲ip獲取的地址
// 存儲IP地址
var ip = returnCitySN["cip"];
// console.log("你的IP是:" +ip)
get_pos(ip);
function get_pos(ip) {
// 構(gòu)建url==>這里使用的是高德地圖
var url = "https://restapi.amap.com/v5/ip?key=你的key&type=4&ip=" + ip;
// 建立所需的對象
var httpRequest = new XMLHttpRequest();
// 打開連接 將請求參數(shù)寫在url中
httpRequest.open('GET', url, true);
// 發(fā)送請求 將請求參數(shù)寫在URL中
httpRequest.send();
// 經(jīng)緯度坐標
var pos = "";
// 獲取數(shù)據(jù)后的處理程序
httpRequest.onreadystatechange = function() {
if (httpRequest.readyState == 4 && httpRequest.status == 200) {
// 獲取到j(luò)son字符串
var ret = httpRequest.responseText;
// 轉(zhuǎn)為JSON對象
var json = JSON.parse(ret);
pos = json["location"];
// console.log("你的經(jīng)緯度是:" +pos)
localStorage.setItem('longitudeAndLatitude',JSON.stringify(pos))
get_addr(pos);
}
};
}
function get_addr(pos) {
var httpRequest = new XMLHttpRequest();
url = "https://restapi.amap.com/v3/geocode/regeo?key=你的key&radius=0&extensions=all&batch=false&location=" + pos;
httpRequest.open('GET', url, true);
httpRequest.send();
httpRequest.onreadystatechange = function() {
if (httpRequest.readyState == 4 && httpRequest.status == 200) {
// 獲取到j(luò)son字符串
var ret = httpRequest.responseText;
// 轉(zhuǎn)為JSON對象
var json = JSON.parse(ret);
var address = json["regeocode"]["formatted_address"];
// console.log("你的地址大概是:"+address);
}
};
}
</script>
</head>
<body>
<noscript>
<strong>Please enable JavaScript to continue.</strong>
</noscript>
<div id="app"></div>
</body>
</html>
3.最終效果:
文章來源地址http://www.zghlxwxcb.cn/news/detail-525870.html
到了這里，關(guān)于uniapp通過ip獲取其地址、經(jīng)緯度、詳細地址:的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
