React获取到用户当前位置

最新推荐文章于 2023-11-20 21:01:37 发布

heroboyluck

最新推荐文章于 2023-11-20 21:01:37 发布

阅读量3.8k

点赞数 1

分类专栏： react 文章标签： react接入百度地图获取用户所在地

本文链接：https://blog.csdn.net/heroboyluck/article/details/104284506

版权

react 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

create-react-app项目获取用户当前所在地。利用百度地图逆坐标转换获取省、市级名称。

`navigator.geolocation`获取地理位置坐标

用户会被提示询问，是否授权。“允许”才会获取到。

MDN 文档

说明：

geolocation对象上的方法:
- getCurrentPosition确定设备位置，并返回一个Position对象。
- watchPosition注册一个改变监听器，每当设备位置发生变化执行回调；返回一个监听器ID
- clearWatch清除一个监听器,参数为监听器ID。
Position对象上的属性：
- coords定义当前位置的属性:latitude、longitude等其他（文档查看），
- timestamp当前位置时间String。
getCurrentPosition接受三个参数：成功的回调、错误回调、配置项
- successFn:参数只有个一个Posititon对象
- errorFn参数为PositionError对象
- options配置项：enableHighAccuracy是否采用高精度值、timeout响应最长时间、maximumAge设置多长时间可使用缓存位置。

if (navigator.geolocation){
	navigator.geolocation.getCurrentPosition(pos=>{
    	let lat = pos.coords.latitude,
        	lng = pos.coords.longitude;
        // 获取到了用户当前位置的坐标
        alert(lng,lat);
    },error=>{
      	switch(error.code){
		    case error.PERMISSION_DENIED:
		        result.msg = "请打开手机定位，并允许获取当前位置";
		        break;
		    case error.POSITION_UNAVAILABLE:
		        result.msg = "定位失败，请退出重试!";
		        break;
		    case error.TIMEOUT:
		        result.msg = "获取位置超时，请退出重试!";
		        break;
		    default:
		        result.msg = "获取定位失败！";
		}
	});
}else{
	// 当前浏览器不支持定位服务
}

接入百度地图获取省、市

百度地图没有提供AMD、CMD加载的方式，只能以script标签加载的方式。
项目根目录下/public/index.html，

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的AK"></script>

放到<head></head>标签里，否则还是undefined

webpack配置以AMD方式加载BMap对象；

npm run eject以获取webpack配置，默认create-react-app创建的项目没有配置文件。
找到目录/config/webpack.config.js，我的就一个配置文件（基础配置中 config.base.js）,
```
// 外部因素
externals:{
  'BMap':'BMap'
}
```
在需要使用到的地方导入import BMap from 'BMap'
利用百度的坐标转换获取到的坐标；
在使用逆坐标转换接口请求获取当前位置的省、市、街道等名称信息。

百度地图API类参考
说明：

Covertor将其他坐标系，转化为百度坐标系。translate为转换方法，回调函数参数：状态、转换后的数组。
translate方法的参数，第2/3个参数含义待查！
Geocoder逆地址解析,getLocation方法对指定坐标点反地址解析，结果为GeocoderResult对象
GeocoderResult地址解析结果对象，包含坐标点、地址描述、结构化地址描述等。结构化地址中包含province/city/district等字段。

navigator.geolocation.getCurrentPosition(pos=>{
    let lat = pos.coords.latitude,
        lng = pos.coords.longitude;
    
    alert(lat+","+lng);
    var geoc = new BMap.Geocoder();  
    let point = new BMap.Point(lng,lat); 
    // 坐标转换，谷歌坐标转百度坐标
    var convertor = new BMap.Convertor();
    let pointArr = [];
    pointArr.push(point);
    convertor.translate(pointArr, 3, 5, data=>{
        if(data.status === 0) {
            let pt = data.points[0];
            geoc.getLocation(pt, function(rs){
                var addComp = rs.addressComponents;
                result.msg= "获取位置成功!";
                result.data = [addComp.province,addComp.city];
            });
        }
    });
},error=>{
    // 错误处理
});