HTTP H5 JS API 如何获取用户的位置信息?

故乡的胡辣汤开张了吗

已于 2023-03-01 18:49:36 修改

阅读量1.5k

点赞数

分类专栏： HTTP 文章标签： javascript 前端开发语言

于 2023-03-01 18:35:21 首次发布

本文链接：https://blog.csdn.net/bai_pd/article/details/108391549

版权

HTTP 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章介绍了三种获取用户位置的方法：1)使用H5Geolocation获取经纬度；2)通过百度地图或腾讯地图API获取详细位置信息，需申请APIkey；3)利用JavaScript和IP查询接口得到用户所在省市。

摘要由CSDN通过智能技术生成

1.H5 Geolocation 获取用户位置的经纬度（方法一）
2.想获取用户位置的具体信息,可以百度地图,腾讯地图的API（方法二）
3.只想简单获取用户所在省市,建议使用js（方法三）

一、H5自带方法 Geolocation (获取的是经纬度，需要自己引入第三方进行查询)

**Geolocation（地理定位）**对于拥有 GPS 的设备，比如 iPhone，地理定位更加精确。

属性详情：
HTML5 地理定位 | 菜鸟教程 (H5 Geolocation)
https://www.runoob.com/html/html5-geolocation.html

二、通过api接口,百度地图,腾讯地图,需要申请key

申请api接口的key
引入对应api接口的js文件(更改为自己的密钥)
根据官方文档编写代码获取用户访问位置
下面以百度地图作为例子获取用户位置信息

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=7a6QKaIilZftIMmKGAFLG7QT1GLfIncg"></script>
// 密钥建议自己申请
<script>
	var geolocation = new BMap.Geolocation(); 
    var gc = new BMap.Geocoder();     
    geolocation.getCurrentPosition(function(r) {  
        if (this.getStatus() == BMAP_STATUS_SUCCESS) { 
        	var a = r.point.lng;
        	var b = r.point.lat ; 
        	var pt = r.point; 
            gc.getLocation(pt, function(rs) {   
	            var addComp = rs.addressComponents;
		    	var province = res.province;	// 省
		   	 	var city = res.city;	// 市
		    	var county = res.county;	// 区
		    	var street = addComp.street;	// 街道
		    	var streetNumber = addComp.streetNumber;	// 门牌号
	       		alert("成功获取当前位置，定位可能出现偏差！");
        	}); 
	}else{  
            switch( this.getStatus() ){  
                    case 2:  
                        alert( '位置结果未知 获取位置失败.' );  
                        break;  
                    case 3:  
                        alert( '导航结果未知 获取位置失败..' );  
                        break;  
                    case 4:  
                        alert( '非法密钥 获取位置失败.' );  
                        break;  
                    case 5:  
                        alert( '对不起,非法请求位置  获取位置失败.' );  
                        break;  
                    case 6:  
                        alert( '对不起,当前 没有权限 获取位置失败.' );  
                        break;  
                    case 7:  
                        alert( '对不起,服务不可用 获取位置失败.' );  
                        break;  
                    case 8:  
                        alert( '对不起,请求超时 获取位置失败.' );  
                        break;
            }
        }          
    },{enableHighAccuracy: true});
<script>

3.直接通过js去获取用户位置信息

目前找到两种方式可以有效获取用户位置信息;

新浪IP地址查询接口,需要手动传递ip（）

访问 http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js&ip=219.242.98.111

搜狐IP地址查询接口 (简单粗暴)

访问 http://pv.sohu.com/cityjson?ie=utf-8

<script src="https://pv.sohu.com/cityjson?ie=utf-8" type="text/javascript"></script>
<script>
      console.log(returnCitySN);
</script>

returnCitySN = {"cip": "127.0.0.1", "cid": "35000", "cname": "xxx省xxx市"};