【React Native】定位获取经纬度,当前城市等地址信息
2017-12-25 14:03
771 查看
最近做React Native时,需要用到城市定位的功能,React Native中文网的定位部分中也提供了相应的方法。主要用到的方法有:
这里只需要获取到经纬度,城市等信息,持续监听的函数就不需要了。这里使用 getCurrentPosition 方法获取当前位置信息,再用逆地址解析服务完成地址获取。
代码次要点:Promise对象 【菜鸟教程Promise,阮一峰ES6-Promise,MDN-Promise】
获取经纬度城市地址信息完整步骤如下:
经纬度,海拔等信息的获取方式就是以 location.coords.longitude,location.coords.latitude ,location.coords.altitudeAccuracy的方式得到。
如果只是需要获取经纬度,这里已经完成。可以通过setState或者赋值给全局变量等方式记录。
为了进一步获取城市,这里Promise将经纬度组合成一个数组resolve传递出去。
注册成为开发者
创建自己的应用
然后获取key或认证
加上经纬度等参数来发起请求
例如百度地图的请求方式:
(9a9a…就是你申请的ak认证,对应在你创建的应用中)
通过Postman 测试请求的效果如下:
这里需要将 location 经纬度参数替换为自己通过 getCurrentPosition 方法获取到的经纬度。也就是先获取到经纬度,再通过逆地址解析获取到城市等地址信息。将这个操作再封装成一个方法:
getLongitudeAndLatitude 就是上面的获取经纬度的方法,this.getNetData是一个fetch 请求的封装。拼接请求 Url,fetch请求,此时 resolve 的数据就是 Postman 解析的 json 数据了。
调用 getCityLocation,再 then 方法处理处理 data ,此时的 data 是一个 json 对象。
例如我的处理是调用 _confirmCity 方法弹出一个城市切换的确认框:
效果图:
这里就已经完成了经纬度的获取,城市地址信息的获取功能。
这里只需要获取到经纬度,城市等信息,持续监听的函数就不需要了。这里使用 getCurrentPosition 方法获取当前位置信息,再用逆地址解析服务完成地址获取。
代码次要点:Promise对象 【菜鸟教程Promise,阮一峰ES6-Promise,MDN-Promise】
获取经纬度城市地址信息完整步骤如下:
1. 导入Geolocation
import Geolocation from 'Geolocation';
2.调用 getCurrentPosition 方法得到经纬度
这里将这个操作封装成一个方法,并返回Promise。//获取经纬度的方法 Longitude Latitude let getLongitudeAndLatitude = () => { //获取位置再得到城市先后顺序,通过Promise完成 return new Promise((resolve, reject) => { Geolocation.getCurrentPosition( location => { //可以获取到的数据 var result = "速度:" + location.coords.speed + "\n经度:" + location.coords.longitude + "\n纬度:" + location.coords.latitude + "\n准确度:" + location.coords.accuracy + "\n行进方向:" + location.coords.heading + "\n海拔:" + location.coords.altitude + "\n海拔准确度:" + location.coords.altitudeAccuracy + "\n时间戳:" + location.timestamp; // ToastAndroid.show("UTIl" + location.coords.longitude, ToastAndroid.SHORT); resolve([location.coords.longitude, location.coords.latitude]); }, error => { // Alert.alert("获取位置失败:" + error, "") reject(error); } ); }) }
经纬度,海拔等信息的获取方式就是以 location.coords.longitude,location.coords.latitude ,location.coords.altitudeAccuracy的方式得到。
如果只是需要获取经纬度,这里已经完成。可以通过setState或者赋值给全局变量等方式记录。
为了进一步获取城市,这里Promise将经纬度组合成一个数组resolve传递出去。
3.使用逆地址解析服务将经纬度解析成地址信息
这里可以通过百度地图或者腾讯位置服务的逆地址解析服务来完成,流程如下:注册成为开发者
创建自己的应用
然后获取key或认证
加上经纬度等参数来发起请求
例如百度地图的请求方式:
https://api.map.baidu.com/geocoder/v2/?output=json&ak=9a9a9a9a9a9a9a9a9a9a9a9a9a&location=39.206526,116.909158
(9a9a…就是你申请的ak认证,对应在你创建的应用中)
通过Postman 测试请求的效果如下:
这里需要将 location 经纬度参数替换为自己通过 getCurrentPosition 方法获取到的经纬度。也就是先获取到经纬度,再通过逆地址解析获取到城市等地址信息。将这个操作再封装成一个方法:
getCityLocation() { return new Promise((resolve, reject) => { getLongitudeAndLatitude() //获取经纬度的方法返回的是经纬度组成的数组 .then((locationArr) => { // Alert.alert("", "" + locationArr[1]); let longitude = locationArr[0]; let latitude = locationArr[1]; this.getNetData(BaiduMap_URL + latitude + "," + longitude) .then((data) => { if (data.status == 0) { resolve(data); } else { reject(ErrorDeal.getError(data.code)); } }).catch((data) => { reject(ErrorDeal.getError(data.code)); }) }).catch((data) => { reject(ErrorDeal.getError(data.code)); }) }) }
getLongitudeAndLatitude 就是上面的获取经纬度的方法,this.getNetData是一个fetch 请求的封装。拼接请求 Url,fetch请求,此时 resolve 的数据就是 Postman 解析的 json 数据了。
//获取网络数据 getNetData(url) { return new Promise((resolve, reject) => { fetch(url).then((response) => response.json()) .then((responseData) => { resolve(responseData); }) .catch((error) => { reject(ErrorDeal.getError(NetWork_Error)) }) .done() }) }
4.获取信息并处理
上面 getCityLocation 返回的 Promise 中 resolve 传递的 data 就是 json 数据了,就已经可以因自身需求进行数据处理显示的操作了。this.getCityLocation() .then((data) => { // Alert.alert("位置?", "" + JSON.stringify(data)); this._confirmCity(data); }) .catch((error) => { //ToastAndroid.show("失败" + JSON.stringify(error), ToastAndroid.SHORT); });
调用 getCityLocation,再 then 方法处理处理 data ,此时的 data 是一个 json 对象。
例如我的处理是调用 _confirmCity 方法弹出一个城市切换的确认框:
//弹出定位框 _confirmCity(data) { let address = data.result.addressComponent; if (address!="") { Alert.alert("城市定位", "\n当前城市为" + address.province + address.city + "\n \n 是否设为当前城市?\n", [ { text: "设为当前城市", onPress: () => { this.setCurrentCity(address.city) } }, {text: "取消"} ] ) } }
效果图:
这里就已经完成了经纬度的获取,城市地址信息的获取功能。
相关文章推荐
- android使用百度地图定位(获取当前经纬度和地址信息)
- Android使用百度地图定位(获取当前经纬度和地址信息)
- android使用百度地图定位(获取当前经纬度和地址信息)
- android开发游记:集成百度定位SDK进行实时定位 获取当前城市地理信息
- AngularJs 利用百度地图API 定位当前位置 获取地址信息
- iOS - (利用/调用系统定位获取当前经纬度与地理信息)
- iOS定位获取当前所在经纬度,进而获得具体地址(省市地区街道)
- 获取当前经纬度并根据经纬度反编译城市地址
- ios开发之 -- 调用系统定位获取当前经纬度与地理信息
- 微信小程序城市定位的实现实例(获取当前所在国家城市信息)
- iOS - (利用/调用系统定位获取当前经纬度与地理信息)
- iOS定位获取当前所在经纬度,进而获得具体地址(省市地区街道)
- 定位功能---封装的一个获取当前位置的经纬度信息的类
- Android LocationManager定位之获取经纬度以及城市信息
- windows phone 7 定位(获取经纬度),然后找到经纬度所在的位置(城市信息)
- AngularJs 利用百度地图API 定位当前位置 获取地址信息
- 安卓定位,获取经纬度,地址信息
- android 百度地图定位获取经纬度已经拿经纬度得到地址信息
- 使用html5定位经纬度然后用百度api获取城市等位置信息
- ios开发之 -- 调用系统定位获取当前经纬度与地理信息