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

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

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

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

  1. 新浪IP地址查询接口,需要手动传递ip()
访问 http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js&ip=219.242.98.111
  1. 搜狐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市"};
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值