使用 react-native-amap-geolocation 接入高德地图定位react-native-amap-g

react-native-amap-geolocation这款插件接入了高德地图定位模块。支持 Android + iOS，提供尽可能完善的原生接口，同时提供符合 Web 标准的 Geolocation API。

本文基于 react-native 0.60 以上版本！

获取高德 App Key

为了使用高德 SDK，你需要准备高德 App Key，获取方法参考高德地图 SDK 官方文档：

{
  "an:key-debug": "keytool -list -v -keystore ./android/app/debug.keystore",
  "an:key-release": "keytool -v -list -keystore ./android/app/release.keystore"
}

获取 iOS App Key

ios 只需要 Bundle Identifier 即可

安装

$ yarn add react-native-amap-geolocation

ios 配置

下载和安装高德IOS SDK

下载基础SDK(含IDFA)
下载定位SDK
将下载的 AMapFoundationKit.framework 和 AMapLocationKit.framework 以及项目自带的ExternalAccessory.framework 添加到 Build Phases ➜ Link Binary With Libraries。

配置权限

添加以下权限到 Info.plist 文件中：

<key>NSLocationWhenInUseUsageDescription</key>
<string></string>
<key>NSLocationAlwaysUsageDescription</key>
<string></string>

ATS设置: Target➜ Info ➜ App Transport Security Setting 展开后的 Allow Arbitrary Loads 设置为 YES

如果要支持后台持续定位，还需要配置以下：

打开xcode，点击项目
选择 Signing&Capabilities,把 Background Modes 打开为 ON，然后打勾 Location updates

Android

react-native 为 0.6x 的话，yarn add react-native-amap-geolocation 就完事了，一步到位不需要过多配置。

基本用法

import { PermissionsAndroid } from "react-native";
import { init, Geolocation } from "react-native-amap-geolocation";

// 对于 Android 需要自行根据需要申请权限
await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.ACCESS_COARSE_LOCATION);

// 使用自己申请的高德 App Key 进行初始化
await init({
  ios: "9bd6c82e77583020a73ef1af59d0c759",
  android: "043b24fe18785f33c491705ffe5b6935"
});

Geolocation.getCurrentPosition(({ coords }) => {
  console.log(coords);
});

直接使用原生接口

import { init, addLocationListener, start, stop } from "react-native-amap-geolocation";

// 添加定位监听函数
addLocationListener(location => console.log(location));

// 开始连续定位
start();

// 在不需要的时候停止定位
stop();

逆地理编码

Android 默认返回逆地理编码，而 iOS 需要手动设置。

import { setLocatingWithReGeocode, setNeedAddress } from "react-native-amap-geolocation";

// android
setNeedAddress(true);

// ios
setLocatingWithReGeocode(true);

定位回调频率限制

import { setInterval, setDistanceFilter } from "react-native-amap-geolocation";

// android，5 秒请求一次定位
setInterval(5000);

// ios，设备移动超过 10 米才会更新位置信息
setDistanceFilter(10);

参考

联系作者

作者微信	知识星球	赞赏作者

使用 react-native-amap-geolocation 接入高德地图定位