react-native 使用高德SDK取得位置信息

1、yarn add react-native-amap-geolocation

2、app>src>app>AndroidManifest.xml 加入权限配置

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>

3、app>src>app>AndroidManifest.xml 加入高德android key 。key通过高德控制台申请。

4、封装Geo.js

import {PermissionsAndroid, Platform} from 'react-native';
import {init, Geolocation} from 'react-native-amap-geolocation';
import axios from 'axios';class Geo {async getCityByLocation() {await init({android: 'a35c88dacc759640fd43415f690b1931',  //加入android key      });// 获得经纬度const {longitude, latitude} = await this.getCurrentPosition();console.log(longitude);console.log(latitude);const res = await axios.get('https://restapi.amap.com/v3/geocode/regeo', {params: {location: `${longitude},${latitude}`,key: '043455fa3a057205e234345c0f58b09c',  //加入 web服务key},});return Promise.resolve(res.data);}
}export default new Geo();

5、调用

import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';
import  Geo  from '~/utils/geo'export default class TestGeo extends Component {state = {longitude: '',//经度latitude: '',//纬度city: '',district: '',street: '',position: '',//位置名称geoinit: false,isInitGeo: false};getGeo= async () => {let data =  await Geo.getCityByLocation();console.log( "data"+ JSON.stringify(data)  );   //数据都在这}UNSAFE_componentWillMount  = () => {this.getGeo();};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><Text style={styles.instructions}>初始化完成：{this.state.isInitGeo }</Text></View>);}
}const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',},instructions: {textAlign: 'center',color: '#333333',marginBottom: 5,},
});

react-native 使用高德SDK取得位置信息相关推荐

React Native升级目标SDK
React Native升级目标SDK 打开在 android/app/的build.gradle 找到 android { } 区块改变以下属性 compileSdkVersion 26 buil ...
微信小程序使用高德API获取位置信息
//调用方法app.getAmapLocation().then((res) => {console.log(res);}); var amapFile = require('static/js ...
React Native Could not expand ZIP错误信息
https://blog.csdn.net/hunannanhu/article/details/78047713
Pano React Native SDK 来了！快速实现移动端音视频和白板
前言 React Native 是 Facebook 于2015年4月开源的跨平台移动应用开发框架,支持iOS和安卓两大平台.React Native 着力于提高多平台开发的开发效率 -- Learn ...
React Native 安卓环境搭建
基础环境必须安装的依赖有:Node.js.Yarn 和 React Native 脚手架.这是运行 RN 的基础 Node.js Node.js 的版本应大于等于 12,推荐安装 LTS 版本(去N ...
[译]哪个跨平台框架才是最好的选择？React Native、Flutter 还是 Ionic
关注前端瓶子君,回复"交流" 加入我们一起学习,天天进步原文地址:React Native vs. Flutter vs. Ionic 原文作者:Sophia Martin 译 ...
如何在React Native和Firebase中设置Google登录
Google sign-in is a great login feature to offer to your app's users. It makes it easier for them to ...
React Native应用实现步骤
React Native应用实现步骤在整个应用设计中,始终按照自下而上的原则进行.在大型的项目中,自下而上的设计方式简单,可以并行工作,并且可以在构建的同时写测试用例. React Native设计 ...
React Native 学习资源精选仓库(汇聚知识，分享精华)
React Native 学习资源精选仓库(汇聚知识,分享精华) <React Native Awesome>这里fork过来的,汇集了各类react-native学习资料.工具.组件.开 ...

react-native 使用高德SDK取得位置信息

react-native 使用高德SDK取得位置信息相关推荐

最新文章

热门文章