[RN] React Native 获取地理位置
React Native 获取地理位置
实现原理:
1、用 navigator.geolocation.getCurrentPosition 获取到坐标信息
2、调用 高德地图 接口,解析位置数据
本文所用RN 版本为 0.57.8
实现代码如下:
import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native'; export default class TestGeo extends Component { state = {
longitude: '',//经度
latitude: '',//纬度
city: '',
district: '',
street: '',
position: '',//位置名称
}; componentWillMount = () => {
this.getPositions();
}; getPositions = () => {
return new Promise(() => {
/** 获取当前位置信息 */
navigator.geolocation.getCurrentPosition(
location => {
this.setState({
longitude: location.coords.longitude,//经度
latitude: location.coords.latitude,//纬度
});
//通过调用高德地图逆地理接口,传入经纬度获取位置信息
fetch(`http://restapi.amap.com/v3/geocode/regeo?key=97c933e33025b3843b40016900074704&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) => {
// console.log(jsonData)
try {
this.setState({
city: jsonData.regeocode.addressComponent.city,
district: jsonData.regeocode.addressComponent.district,
street: jsonData.regeocode.addressComponent.township,
position: 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.city}</Text>
<Text style={styles.instructions}>区域:{this.state.district}</Text>
<Text style={styles.instructions}>街道:{this.state.street}</Text>
<Text style={styles.instructions}>详细位置:{this.state.position}</Text>
</View>
);
}
} const styles = StyleSheet.create({
container: {
flex: ,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: ,
},
});
附:
高德 接口文档:
https://lbs.amap.com/api/webservice/summary
本博客地址: wukong1688
本文原文地址:https://www.cnblogs.com/wukong1688/p/11062409.html
转载请著名出处!谢谢~~
[RN] React Native 获取地理位置的更多相关文章
- [RN] React Native 获取验证码 按钮
React Native 获取验证码 按钮 效果如图: 实现方法: 一.获取验证码 按钮组件 封装 CountDownButton.js "use strict"; import ...
- [RN] React Native 幻灯片效果 Banner
[RN] React Native 幻灯片效果 Banner 1.定义Banner import React, {Component} from 'react'; import {Image, Scr ...
- [RN] React Native 实现 类似QQ 登陆页面
[RN] React Native 实现 类似QQ 登陆页面 一.主页index.js 项目目录下index.js /** * @format */ import {AppRegistry} from ...
- [RN] React Native 实现图片预览
[RN] React Native 实现图片预览 效果预览: 代码如下: 'use strict'; import React, {Component} from 'react'; import {I ...
- [RN] React Native 常见基本问题归纳总结
[RN] React Native 常见基本问题归纳总结 本问题总结涉及到版本为: "react": "16.8.3","react-native& ...
- [RN] React Native 关闭所有黄色警告
[RN] React Native 关闭所有黄色警告 console.ignoredYellowBox = ['Warning: BackAndroid is deprecated. Please u ...
- [RN] React Native 下实现底部标签(支持滑动切换)
上一篇文章 [RN] React Native 下实现底部标签(不支持滑动切换) 总结了不支持滑动切换的方法,此篇文章总结出 支持滑动 的方法 准备工作之类的,跟上文类似,大家可点击上文查看相关内容. ...
- [RN] React Native 常用命令行
[RN] React Native 常用命令行 1.查看当前版本 react-native --version 或 react-native -v 2.创建指定版本的React Native项目 1) ...
- [RN] React Native 让 Flatlist 支持 选中多个值,并获取所选择的值
React Native 让 Flatlist 支持 选中多个值,并获取所选择的值 实现效果如下: 实现代码: import React, {Component} from 'react'; im ...
随机推荐
- git add命令行添加文件、文件夹以及撤销文件add的方法
1.添加某个文件类型到暂存区,比如所有的 .html 文件. git add *.html 2.添加某个文件或者某个文件夹中的某个文件到暂存区 ,比如 index 下的 index.htm ...
- Java8 新特性 Stream 练习实例
练习实例 配合Java8 新特性 Steam() API 使用 //没有写get set 构造方法 public class Sku { private Integer skuId; private ...
- VS.NET(C#)--2.4_aspx默认页面模板代码
默认模板代码 客户端浏览器将忽视<script>块间任何字符,不在页面输出.通过<%=DataTime.Now.ToString() %> 将服务端代码放中间 < ...
- NET 在一个数组中查找另一个数组所在起始位置(下标从0开始,未找到返回-1)
问题: 如果 search 在 dist 中顺序出现而不要求连续出现,那代码应该如何修改?如何计算这种匹配的可能性? 数组 search=[5,4,6],在数据 dist=[1,5,5,4,3,4,5 ...
- Python 绘图与可视化 matplotlib 动态条形图 bar
bar的参考链接:https://matplotlib.org/3.1.1/api/_as_gen/matplotlib.pyplot.bar.html 第一种办法 一种方法是每次都重新画,包括清除f ...
- Java虚拟机内存区域详解
JVM 运行时的数据区域 首先获取一个直观的认识: 总共也就这么 5 个区(直接内存不属于 JVM 运行时数据区的一部分),除了程序计数器其他的地方都有可能出现 OOM (OutOfMemoryErr ...
- Spring事务源码解析(二)获取增强
在上一篇文章@EnableTransactionManagement注解解析中,我们搭建了源码阅读的环境,以及解析了开启Spring事务功能的注解@EnableTransactionManagemen ...
- javascript实现blob加密视频源地址
一.HTML代码: <video id="my-video" class="video-js" playsinline controls preload= ...
- TinyMCE常用插件
Advanced Tables 基于table插件的增强表格插件,添加了排序功能. tinymce.init({ plugins: 'table advtable', menubar: 'table' ...
- 英语AmbraGrisea龙涎香
龙涎香AmbraGrisea是抹香鲸科动物抹香鲸的肠内分泌物的干燥品.取自宰杀的抹香鲸肠内分泌物(即鲸鱼的粪便,它是抹香鲸吞食墨鱼后,胃肠道分泌出来的灰黑色的蜡状排泄物).其味甘.气腥.性涩,具有行气 ...