1.方法:
查看ip内容: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地址:(此方法会跨域报错=>后续找到解决方法再补充)
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、如果需要展示地区名称，还需要另外引入类似百度地图的第三方平台提供的js进行经纬度转换地区名称等。
3、浏览器地址必须是https的，不然不支持。
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition((res)=> {
console.log(res);//这里会返回经纬度，然后还要通过经纬度转换地区名称
});
}
【4】使用百度地图获取位置
1、在百度地图开发平台注册账号，并申请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、在页面中写入下面代码（可以直接返回经纬度和省市区名称等）：
mounted() {
//获取当前城市
var geolocation=new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
var city=r.address.city//返回当前城市
that.currCity = city;
})
},
【5】微信js-sdk自带的API
登录微信平台获取appid和秘钥
配置服务器信息，和js接口安全域名、网页授权域名等
把配置信息文件.txt放到配置的服务器下面
查看所有的接口权限，是否有获取用户地理位置
通过调接口的方式获取时间戳，签名等
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('用户拒绝授权位置信息！');
}
})
})
2.案例:
文章来源：https://www.toymoban.com/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) {
// 构建url==>这里使用的是高德地图
var url = "https://restapi.amap.com/v5/ip?key=你的key&type=4&ip=" + ip;
// 建立所需的对象
var httpRequest = new XMLHttpRequest();
// 打开连接 将请求参数写在url中
httpRequest.open('GET', url, true);
// 发送请求 将请求参数写在URL中
httpRequest.send();
// 经纬度坐标
var pos = "";
// 获取数据后的处理程序
httpRequest.onreadystatechange = function() {
if (httpRequest.readyState == 4 && httpRequest.status == 200) {
// 获取到json字符串
var ret = httpRequest.responseText;
// 转为JSON对象
var json = JSON.parse(ret);
pos = json["location"];
// console.log("你的经纬度是:" +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) {
// 获取到json字符串
var ret = httpRequest.responseText;
// 转为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.最终效果:
文章来源地址https://www.toymoban.com/news/detail-525870.html
到了这里，关于uniapp通过ip获取其地址、经纬度、详细地址:的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
