react-native使用高德地图获取当前地理位置

1.高德地图官网申请一个web平台key,和android平台key

2.安装依赖

yarn add react-native-amap-geolocation
npx react-native link react-native-amap-geolocation
yarn add @react-native-community/geolocation

3.项目app>src>app>AndroidManifest.xml 加入权限配置

4.封装

import React from 'react';
import {PermissionsAndroid, Platform} from 'react-native';
import {init} from 'react-native-amap-geolocation';
import geolocation from '@react-native-community/geolocation';import axios from 'axios';
const useGeo = () => {const initGeo = async () => {if (Platform.OS === 'android') {const granted = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.ACCESS_COARSE_LOCATION,);if (granted === PermissionsAndroid.RESULTS.GRANTED) {await init({android:  '***************',//android平台key// ios: '################',});return Promise.resolve();}}};const GetCurrentPosition = async () => {return new Promise((resolve, reject) => {geolocation.getCurrentPosition(({coords}) => {console.log('coords', coords);resolve(coords);}, reject);});};const getCityByLocation = async () => {const {longitude, latitude} = await GetCurrentPosition();const res = await axios.get('https://restapi.amap.com/v3/geocode/regeo', {// key  高德地图中第一个应用的keyparams: {location: `${longitude},${latitude}`,key: '***************',//web平台key},});return Promise.resolve(res);};return {initGeo, GetCurrentPosition, getCityByLocation};

5.先在App.js初始化

/* eslint-disable react-native/no-inline-styles */
import React, {useState, useEffect} from 'react';
import Store from './src/redux/store';
import {View} from 'react-native';
import Nav from './src/router';
import {Provider} from 'react-redux';
import {NativeBaseProvider} from 'native-base';
import Geo from './src/utils/Geo';
import UseWrap from './src/wrap';
const App = () => {const [isInitGeo, setIsInitGeo] = useState(false);useEffect(() => {async function getLocation() {await Geo.initGeo();setIsInitGeo(true);}getLocation();}, []);return (<NativeBaseProvider><View style={{flex: 1}}><Provider store={Store}><UseWrap>{isInitGeo ? <Nav /> : null}</UseWrap></Provider></View></NativeBaseProvider>);
};export default App;

6.调用获取地理位置

import Geo from '../../utils/Geo';
useEffect(() => {async function getLocation() {Toast.show({title: '获取地理位置'});const res = await Geo.getCityByLocation();console.log('res', res);const address1 = res.regeocode.formatted_address;const city1 = res.regeocode.addressComponent.district;const lng1 =res.regeocode.addressComponent.streetNumber.location.split(',')[0];const lat1 =res.regeocode.addressComponent.streetNumber.location.split(',')[1];setCity(city1);setAddress(address1);setLat(lat1);setLng(lng1);}getLocation();// eslint-disable-next-line react-hooks/exhaustive-deps}, []);

react-native使用高德地图获取当前地理位置相关推荐

react 中使用高德地图获取省市区列表
第一步:引入地图api js ,地图容器id,初始化 <script type="text/javascript" src="https://webapi.amap ...
vue 获取当前位置高德_vue高德地图获取当前位置
一:安装依赖 npm install vue-amap --save 二:main.js中的配置 import VueAMap from 'vue-amap'; Vue.use(VueAMap); V ...
react 逆地理高德地图_react中使用高德地图的原生API
干货,无话 1.react-create-app,创建新react项目: 2.npm install react-amap,引入高德地图的封装: 3.编写组件index.js: import Reac ...
React Native for Arcgis 地图开发 LocationCtrl （十五）
定位工具封装和使用 LocationCtrl import React, {useState, useEffect} from 'react'; import {View, Text, ScrollV ...
android 高德地图 sh1,百度、高德地图获取发布版（Release）SHA1
一.简介: 在百度.高德地图开发中,申请key的时候,要两个版本的sha1值.一个是开发版(debug),一个是发布版(release). debug版本的sha1比较好获取,网上资料一堆,这里引用一 ...
flutter集成高德地图获取位置
flutter集成高德地图获取位置准备工作在创建安卓应用获取SHA1 获取当前位置添加依赖文件配置 build.gradle文件配置 AndroidManifest.xml配置获取定位准 ...
高德地图获取当前屏幕中心点的经纬度
公司有个需求就是要随着屏幕的改变而加载附近的商户信息. 那么高德地图获取当前屏幕中心点的经纬度呢? 核心方法:aMap.setOnCameraChangeListener(this); 实现接口: @ ...
高德地图获取可视区域内四角坐标（东北，东南，西南，西北）
高德地图获取可视区域内四角坐标(东北,东南,西南,西北) 场景:当需要实现查询某坐标区域内的所有共享单车,那么常规操作就是把所选区域内的左上和右下两点经纬度给到后端.获取方法如下: // 初始化地图m ...
java api从高德地图获取某个位置的经纬度
1.代码展示 import com.fasterxml.jackson.databind.JsonNode; import com.ning.http.client.AsyncHttpClient; ...

react-native使用高德地图获取当前地理位置

react-native使用高德地图获取当前地理位置相关推荐

最新文章

热门文章