React-Native 高德地图的使用

使用 react-native-amap-geolocation

高德地图组件

分别使用了两个功能，一个是AndroidSDK和一个web服务

1. 申请 高度地图的key

2. 下载依赖

   yarn add  react-native-amap-geolocation
   

3. 配置文件

   1. 编辑 android/settings.gradle，设置项目路径：

      + include ':react-native-amap-geolocation'
      + project(':react-native-amap-geolocation').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-amap-geolocation/lib/android')
      

   2. 编辑 android/app/build.gradle，新增依赖：

      dependencies {
      +   implementation project(':react-native-amap-geolocation')
      }
      

   3. 编辑 strl + e MainApplication.java：

   当我编辑这个文件的时候，一直都会报错，现在还没有找到解决方法，如果这个没有引入的话，会导致经纬度判断错误

   + import cn.qiuxiang.react.geolocation.AMapGeolocationPackage;
   
   public class MainApplication extends Application implements ReactApplication {
     @Override
           protected List<ReactPackage> getPackages() {
             @SuppressWarnings("UnnecessaryLocalVariable")
             List<ReactPackage> packages = new PackageList(this).getPackages();
             // Packages that cannot be autolinked yet can be added manually here, for example:
   +         packages.add(new AMapGeolocationPackage());
             return packages;
           }
   }
   

4. 代码

   import {PermissionsAndroid, Platform} from 'react-native';
   import {init, Geolocation} from 'react-native-amap-geolocation';
   import axios from 'axios';
   class Geo {
     async initGeo() {
       if (Platform.OS === 'android') {
         await PermissionsAndroid.request(
           PermissionsAndroid.PERMISSIONS.ACCESS_COARSE_LOCATION,
         );
       }
       await init({
         // 这个在Anita_Map中获取，绑定服务是Android平台
         android: 'c998d78ec88d171b87d43c8aac735de0',
       });
       return Promise.resolve();
     }
     async getCurrentPosition() {
       return new Promise((resolve, reject) => {
         console.log('开始定位');
         Geolocation.getCurrentPosition(({coords}) => {
           resolve(coords);
         }, reject);
       });
     }
   
     async getCityByLocation() {
       // 这个init可是删去，当初是为了测试代码方便
       await init({
         android: 'c998d78ec88d171b87d43c8aac735de0',
       });
       // 获得经纬度
       // 这里经纬度获取错误
       const {longitude, latitude} = await this.getCurrentPosition();
       console.log(longitude);
       console.log(latitude);
       const res = await axios.get('https://restapi.amap.com/v3/geocode/regeo', {
         // key在Anita_android中获取绑定服务是Web服务
         // https://console.amap.com/dev/key/app
         params: {
           location: `${longitude},${latitude}`,
           key: '10e2f0f3f45fe6aab8b64fae56773134',
         },
       });
       return Promise.resolve(res.data);
     }
   }
   
   export default new Geo();
   
   

• App.js

import React, { Component } from 'react';
import { View, AsyncStorage } from 'react-native';
import Nav from "./src/nav";
// 是那个定位的
import Geo from "./src/utils/Geo";
// 这个是引入全局数据的mobx
import RootStore from "./src/mobx";
import UserStore from "./src/mobx/userStore";
import { Provider } from "mobx-react";

class App extends Component {
  // 做地图的初始化
  // 防止异步操作还没有初始化完就渲染页面了
  state = {
    isInitGeo: false
  }
  async componentDidMount() {
    await Geo.initGeo();
    this.setState({ isInitGeo: true });
  }
  render() {
    return (
      <View style={{ flex: 1 }}>
        {/* 在这里设置全局变量 */}
        <Provider RootStore={RootStore} UserStore={UserStore} >
          {this.state.isInitGeo ? <Nav></Nav> : <></>}
        </Provider>
      </View>
    );
  }
}
export default App;