要获取手机的当前地理位置,首先要获得经纬度,然后通过逆地理编码获得位置信息
地理编码/逆地理编码 API 是通过 HTTP/HTTPS 协议访问远程服务的接口,提供结构化地址与经纬度之间的相互转化的能力。
1.AndroidManifest.xml加入权限
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
2.这里调用getCurrentPosition 方法得到经纬度,这里我把得到的经纬度保存到state中对应的longitude和latitude里面。
再调用高德地图的接口,通过逆地理接口返回位置信息(下面放了完整代码,直接复制全部然后覆盖app.js启动就能看到效果了)
(这里有个我遇到的很大的坑:react native版本为0.57.4的时候(也就是我现在的版本),
我用import Geolocation from 'Geolocation';导入会运行报错的,具体错误有好几个。
比如:
1.module:metro-react-native-babel-preset 找不到,但是这个东西已经淘汰被babel-preset-react-native替代了,但是我两个都npm install还是要说con't not findmodule:metro-react-native-babel-preset,把metro-react-native-babel-preset删除了也还是抱这个错误,真是气死人了。
2.还有就是谜之500错误,真的难受。
3.另外我在版本为0.55.4的项目中使用import Geolocation from 'Geolocation';方式导入是能用的,也能获取经纬度。但我新建一个项目为版本是0.57.4,我把版本改为0.55.4也报错con't not findmodule:metro-react-native-babel-preset,阴魂不散啊,对新手太不友好了,难受+10086!!!
var Geolocation = require('Geolocation');
这种方式导入也会运行报错。错误都跟import Geolocation from 'Geolocation';这种方式导入出现的错误差不多。)
app.js:
/*** Sample React Native App* /facebook/react-native** @format* @flow*/import React, {Component} from 'react';import { StyleSheet, Text, View} from 'react-native';export default class App extends Component {state = {longitude:'',//经度latitude:'',//纬度position:'',//位置名称};componentWillMount = () => {this.getPositions();};getPositions=()=>{return new Promise(() => {/** 获取当前位置信息 */navigator.geolocation.getCurrentPosition(location => {this.setState({longitude: location.coords.longitude,//经度latitude: location.coords.latitude,//纬度});//通过调用高德地图逆地理接口,传入经纬度获取位置信息fetch(`/v3/geocode/regeo?key=你的key&location=${this.state.longitude},${this.state.latitude}&radius=1000&extensions=all&batch=false&roadlevel=0`, {method: "POST",headers: {"Content-Type": "application/x-www-form-urlencoded"},body: ``}).then((response) => response.json()).then((jsonData) => {try {this.setState({position:jsonData.regeocode.formatted_address,});alert(jsonData.regeocode.formatted_address)}catch (e) {}}).catch((error) => {console.error(error);});//访问网络结束},error => {console.error(error);});})}render() {return (<View style={styles.container}><Text style={styles.instructions}>经度:{this.state.longitude}</Text><Text style={styles.instructions}>纬度:{this.state.latitude}</Text><Text style={styles.instructions}>当前位置:{this.state.position}</Text></View>);}}const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',},welcome: {fontSize: 20,textAlign: 'center',margin: 10,},instructions: {textAlign: 'center',color: '#333333',marginBottom: 5,},});
3.拼接的参数含义可查看/api/webservice/guide/api/georegeo,
另外key=你的key是需要自己添加的,
打开应用管理/dev/key/app,添加新key即可(添加的key时候注意key的类型)
/v3/geocode/regeo?key=你的key&location=${this.state.longitude},${this.state.latitude}&radius=1000&extensions=all&batch=false&roadlevel=0`
这是我复制过来的高德地图逆地理的接口请求参数表和返回类型表
逆地理编码API服务地址->
/v3/geocode/regeo?
请求参数:返回类型: