• uniapp通过ip获取其地址:

    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>

    • 1
    • 2
    • 3
    • 4

    【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]);
	}
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    在这里插入图片描述
    【3】使用H5自带的获取位置

    1、部分手机和浏览器不太支持这个API，还会有警告报错，所以感觉这个API有点鸡肋，不太能用得上。
2、如果需要展示地区名称，还需要另外引入类似百度地图的第三方平台提供的js进行经纬度转换地区名称等。
3、浏览器地址必须是https的，不然不支持。

    • 1
    • 2
    • 3
    if(navigator.geolocation) {
	navigator.geolocation.getCurrentPosition((res)=> {
		 console.log(res);//这里会返回经纬度，然后还要通过经纬度转换地区名称
	});
}

    • 1
    • 2
    • 3
    • 4
    • 5

    【4】使用百度地图获取位置

    1、在百度地图开发平台注册账号，并申请ak密钥
2、在页面中引用百度地图js，(vue项目就在index.html中引用)

    • 1
    • 2
    <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>

    • 1
    • 2
    • 3
    • 4
    • 5
    3、在页面中写入下面代码（可以直接返回经纬度和省市区名称等）：

    • 1
    mounted() {            
	//获取当前城市
    var geolocation=new BMap.Geolocation();
    geolocation.getCurrentPosition(function(r){
        var city=r.address.city//返回当前城市
        that.currCity = city;
     })
},

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    【5】微信js-sdk自带的API

    登录微信平台获取appid和秘钥

配置服务器信息，和js接口安全域名、网页授权域名等

把配置信息文件.txt放到配置的服务器下面

查看所有的接口权限，是否有获取用户地理位置

通过调接口的方式获取时间戳，签名等

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    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('用户拒绝授权位置信息！');
        }
    })
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    3.最终效果:

    在这里插入图片描述

  • 相关阅读:
    MySQL的 validate_password插件 和 validate_password组件
    el-form for循环动态校验规则
    痞子衡嵌入式：使用恩智浦GUI Guider快速创建全新LCD屏示例工程的步骤
    重学设计模式之代理模式一 静态代理
    Java面试复习大纲2.0（持续更新）
    SpringBoot3正式版将于11月24日发布：都有哪些新特性？
    为什么学不会俄语？
    逻辑回归预测瘀血阻络证||LogRegression 二分类 python3
    OpenGL 纹理详解
    [论文阅读] Multimodal Unsupervised Image-to-Image Translation
  • 原文地址：https://blog.csdn.net/weixin_53791978/article/details/126733444