uniapp通过ip获取其地址、经纬度、详细地址:

Sun Peng

已于 2022-10-31 15:33:50 修改

阅读量5.3k

点赞数

分类专栏：小程序端图表与地图文章标签： uni-app tcp/ip 网络协议

于 2022-09-06 20:58:34 首次发布

本文链接：https://blog.csdn.net/weixin_53791978/article/details/126733444

版权

小程序端同时被 2 个专栏收录

57 篇文章 5 订阅

订阅专栏

图表与地图

23 篇文章 3 订阅

订阅专栏

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.案例:

在这里插入图片描述

<!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>