700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > (简单详细)React Native获取手机当前经纬度 (通过高德地图接口)获取当前地理位置

(简单详细)React Native获取手机当前经纬度 (通过高德地图接口)获取当前地理位置

时间:2020-12-29 03:34:38

相关推荐

(简单详细)React Native获取手机当前经纬度 (通过高德地图接口)获取当前地理位置

要获取手机的当前地理位置,首先要获得经纬度,然后通过逆地理编码获得位置信息

地理编码/逆地理编码 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?

请求参数:返回类型:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。