React Native使用高德地图定位(适用Android)

1. npm install

打开终端进入目标项目文件夹下,执行npm install react-native-amap-location --save

---

2. Gradle 设置

进入项目文件夹下android目录下settings.gradle文件,加上如图标出的语句.

gradle设置

include ':reactamaplocation'

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

---

3. 更新App  Gradle编译设置

进入项目文件夹下android/app/build.gradle,打开文件

gradle编译设置

---

4. 注册React Package

进入项目进入项目文件夹android/app/src/main/java..下MainActivity.java文件

import com.xiaobu.amap.AMapLocationReactPackage;

...//不要忘记导入包

@Override

protected List getPackages() {

         returnArrays.asList(

        newMainReactPackage(),

        newAMapLocationReactPackage());// <-- Register package here

}

注册设置

---

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

进入项目进入项目文件夹android/app/src/main下的XML文件

权限配置

android:value="一定要输入自己申请的key值".下面会讲如何申请key值.

---

6. 高德地图key值申请

这里提供给你们一个申请key值得链接http://lbs.amap.com/,进入这个网站,按照提示注册账号,然后进入[控制台]

大致会看到下图的界面.

申请界面

点击创建新应用,这里创建一个test应用,点击添加新key值

test

根据自己需要设置,上述所说针对Android平台

添加新key值

SHA1的值需要自己获取.这里提供一种方式,IDE,电脑系统不同获取方式也可能不同,可以自己百度查看如何获取.

http://lbs.amap.com/api/android-location-sdk/guide/creat-project/get-key/#sha1

Package需要和自己设置的包名一致,最简单的方式查看这个文件,填写Package.

包名填写

---

7. 使用实例

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();

}

...

代码就是这么简单,console打印出来的信息格式如下

输出格式

可以根据自己需要的参数通过data.latitude这种格式获得.