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>

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

3.最终效果:

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

微信小程序选择地址填写详细地址定位地点
感觉自己做了一个没有意义的东东,选择地址填写详细地址就可以找到那个地方. 如下图所示首先需要一个写好的城市选择器,你可以自己写,也可以私信我h(￣▽￣)~* 这是外部引入的组件 <area_p ...
uniapp+高德地图api 获取定位信息及详细地址
引入高德地图js api 高德地图api官方文档根据官方文档建议,我使用的是JSAPI Loader 并且是通过npm安装的 npm i @amap/amap-jsapi-loader --save ...
uni-app获取位置信息(经纬度转换地址信息)
uniapp获取位置信息,获取到的信息为经纬度,再通过转换成地址信息 1.使用uni.getLocation()获取位置信息 2.下载qqmap-wx-jssdk.js插件插件下载地址 3.使用腾讯位 ...
根据IP获取坐标（经纬度）
需求:使用腾讯地图,通过IP获取经纬度 1.先引入腾讯地图,参考https://blog.csdn.net/l13620804253/article/details/117254651 2.要调用腾讯 ...
移动端vue+vant+高德地图实现拖拽选址，周边选址，搜索选址，自动定位，选择城市功能，获取地址经纬度，详细地址
效果图: 在public文件夹下的index.html文件中head标签下加上script标签如下: <script type="text/javascript">wi ...
根据IP获取具体城市名称及经纬度坐标
用到两款工具, geoip-api 这个可以根据IP获取城市以及经纬度但是获取的城市是拼音不是汉字导致山西和陕西的拼音相同无法分辨,所以引入第二款工具ip2region 可以根据ip获取到具体的 ...
腾讯地图api php经纬度转换地址,腾讯地图经纬度转换为百度地图经纬度
‍ 利用微信来获取用户当前的详细地址是非常方便的,但是利用微信获取到用户的经纬度转换为具体地址时,老是出现误差很大,因此,决心把腾讯地图经纬度转换城百度地图经纬度,然后再‍利用百度地图api来获取详细 ...
C# 通过百度地图API，获取访问IP详细地址（上网IP的大致位置信息,一般为城市级别)
1.创建接受Json格式数据类 namespace BaiduMap {[Serializable]public class IpLocationResult{/// <summary>/ ...
uniapp：微信小程序使用高德地图进行坐标反解析获取详细地址
开发过小程序的都了解,我们在调用 uni.getLocation Api的时候,在微信小程序端,只会返给我们一个坐标系,当前位置的经纬度,当我们需要去知道当前位置的详细地址时,我们就需要进行反解析来获 ...

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

1.方法:

2.案例:

3.最终效果:

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

最新文章

热门文章