[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 ...
随机推荐
- SpringBoot第十五篇:swagger构建优雅文档
作者:追梦1819 原文:https://www.cnblogs.com/yanfei1819/p/11007470.html 版权声明:本文为博主原创文章,转载请附上博文链接! 引言 前面的十四 ...
- 用友U8根据客户简称/供应商简称的拼音首字母生成助记码
用友U8+中,客户档案和供应商档案可以设置自动生成助记码,但软件只能自动根据客户全称/供应商全称生成助记码,而无法选择按简称生成助记码,这显然十分不方便,可以通过如下方式解决: 修改步骤 1.往数据库 ...
- 修!咻咻!团队Beta作业博客汇总
作业描述 课程 软件工程1916|W(福州大学) 团队名称 修!咻咻! 作业要求 项目Beta冲刺(团队) 团队目标 切实可行的计算机协会维修预约平台 开发工具 Eclipse 团队信息 队员学号 队 ...
- CentOS7安装图形化界面方法
一.linux安装(root用户操作) 1. 安装vncserver; yum install tigervnc-server 2. 安装vncviewer; yum install vnc 3. 设 ...
- ReentrantLock和Condition实现生产者和消费者
一个生产者和一个消费者 public class ConditionTest { private static ReentrantLock lock = new ReentrantLock(); pr ...
- ReentrantLock使用示例
/** * ReentrantLock是独占锁 * Lock锁的使用,把锁和要用锁同步的代码放在一起,这里就是放在Printer类中了 * 获取到锁后,最后要在finally代码块中手动释放锁 */ ...
- mysql判断是否存在数据库和表,进行删除和创建
1.存在莫数据库,则删除创建一个新库 drop database if exists `tpm_business`; CREATE DATABASE tpm_business DEFAULT CHAR ...
- [NOI2019] 弹跳
题意: 给你平面上的$n$个点,共有$m$个弹跳装置. 每个弹跳装置可以从点$p_{i}$以$t_{i}$的代价跳到矩形$(L_{i},D_{i}),(R_{i},U_{i})$中的任何一个点. 现在 ...
- Java设计模式原型模式
原型模式: – 通过new产生一个对象需要非常繁琐的数据准备或访问权限,则可以使用原型模式. – 就是java中的克隆技术,以某个对象为原型,复制出新的对象.显然,新的对象具备原型对象的特点 – 优势 ...
- Dapper学习(三)之其他用法
这里说的其他用法,是指 Async,Buffered,Transaction,Stored Procedure. 1. 首先 dapper支持异步 ExecuteAsync, QueryAsync, ...