RN导入高德地图定位的用法实例

转载自：[译]React Native开源高德地图定位组件(react-native-amap-location) -江清清的技术专栏

1.NPM install

1	npm install relocation --save

 

2.更新Gradle 设置

1 2 3 4 5

// file: android/settings.gradle ...   include ':reactamaplocation' project( ':reactamaplocation' ).projectDir = new File(rootProject.projectDir, '../node_modules/react-native-amap-location' )

3.更新App  Gradle编译设置

1 2 3 4 5 6 7

// file: android/app/build.gradle ...   dependencies {      ...      compile project( ':reactamaplocation' ) }

4.注册React Package

1 2 3 4 5 6 7 8 9 10 11 12 13

import com.xiaobu.amap.AMapLocationReactPackage; ...     /**     * A list of packages used by the app. If the app uses additional views     * or modules besides the default ones, add more packages here.     */      @Override      protected List<ReactPackage> getPackages() {        return Arrays.<ReactPackage>asList(          new MainReactPackage(),         // v-- Register package here          new AMapLocationReactPackage() );       } ...

5.添加地图Service,Appkey和权限配置

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

// file: android/srsettings.gradle <!--用于进行网络定位--> <uses-permission android:name= "android.permission.ACCESS_COARSE_LOCATION" ></uses-permission> <!--用于访问GPS定位--> <uses-permission android:name= "android.permission.ACCESS_FINE_LOCATION" ></uses-permission> <!--获取运营商信息，用于支持提供运营商信息相关的接口--> <uses-permission android:name= "android.permission.ACCESS_NETWORK_STATE" ></uses-permission> <!--用于访问wifi网络信息，wifi信息会用于进行网络定位--> <uses-permission android:name= "android.permission.ACCESS_WIFI_STATE" ></uses-permission> <!--这个权限用于获取wifi的获取权限，wifi信息会用来进行网络定位--> <uses-permission android:name= "android.permission.CHANGE_WIFI_STATE" ></uses-permission> <!--用于访问网络，网络定位需要上网--> <uses-permission android:name= "android.permission.INTERNET" ></uses-permission> <!--用于读取手机当前的状态--> <uses-permission android:name= "android.permission.READ_PHONE_STATE" ></uses-permission> <!--写入扩展存储，向扩展卡写入数据，用于写入缓存定位数据--> <uses-permission android:name= "android.permission.WRITE_EXTERNAL_STORAGE" ></uses-permission> <uses-permission android:name= "android.permission.INTERNET" />   ...   <application        android:allowBackup= "true"        android:label= "@string/app_name"        android:icon= "@mipmap/ic_launcher"        android:theme= "@style/AppTheme" > //还需添加以下内容        <service android:name= "com.amap.api.location.APSService" ></service>        <meta-data           android:name= "com.amap.api.v2.apikey"           android:value= "Your api key here" /> ...

主要方法

startLocation(options)  开始定位

stopLocation()      停止定位

unlistenFn = addEventListener(Callback(result))  添加定位事件回调方法

参数配置项

1 2 3 4 5 6 7 8 9 10 11 12 13

默认设置 {    needDetail: false , // 显示详细信息    needMars: false , // 是否需要火星坐标，默认将火星坐标转为地球坐标    accuracy: 'HighAccuracy' , // BatterySaving or DeviceSensors    needAddress: true ,    onceLocation: false ,    wifiActiveScan: true ,    mockEnable: false ,    interval: 2000,    gpsFirst: false ,    httpTimeOut: 30000, }

使用实例

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

import AMapLocation from 'react-native-amap-location' ; ... componentDidMount() {    this .unlisten = AMapLocation.addEventListener((data) => console.log( 'data' , data));    AMapLocation.startLocation({      accuracy: 'HighAccuracy' ,      killProcess: true ,      needDetail: true ,    }); }   componentWillUnmount() {    AMapLocation.stopLocation();    this .unlisten.remove(); } ...   /* result: {    accuracy: 29    adCode: "310114"    address: "上海市嘉定区嘉三路靠近同济大学嘉定校区华楼"    altitude: 0    bearing: 0    city: "上海市"    cityCode: "021"    country: "中国"    district: "嘉定区"    latitude: 31.285728    locationDetail: "-1"    locationType: 4    longitude: 121.217404    poiName: "同济大学嘉定校区华楼"    provider: "lbs"    province: "上海市"    satellites: 0    speed: 0    street: "嘉松北路"    streetNum: "6128号" } */