react-native-amap-geolocation这款插件接入了高德地图定位模块。支持 Android + iOS，提供尽可能完善的原生接口， 同时提供符合 Web 标准的 Geolocation API。
ios下的安装
依次在命令下执行以下2条命令
yarn add react-native-amap-geolocation
react-native link react-native-amap-geolocation
如果出现了link的相关报错的话，就需要手动link一下
- 用xcode打开该项目
- 点击项目的根目录右键 add File to "项目名"
- 选择并添加 node_modules/react-native-amap-geolocation/lib/ios/AMapGeolocation.xcodeproj （或从文件浏览器里将该文件拖拽到 Libraries）
- Build Phases ➜ Link Binary With Libraries 中选择并添加 libAMapGeolocation.a
下载和安装高德IOS SDK
- 下载基础SDK(含IDFA)
- 下载定位SDK
- 将下载的AMapFoundationKit.framework 和 AMapLocationKit.framework 以及 项目自带的ExternalAccessory.framework 添加到 Build Phases ➜ Link Binary With Libraries。
配置权限
高德地图官方文档权限参考
ios8-10权限 NSLocationWhenInUseUsageDescription和NSLocationAlwaysUsageDescription
ios11以上权限 NSLocationAlwaysAndWhenInUseUsageDescription和NSLocationWhenInUseUsageDescription
ios8-ios11+权限NSLocationWhenInUseUsageDescription、NSLocationAlwaysUsageDescription和NSLocationAlwaysAndWhenInUseUsageDescription
苹果官方权限参考
ios11以上权限 NSLocationWhenInUseUsageDescription 和NSLocationAlwaysAndWhenInUseUsageDescription
ios11以下权限 NSLocationAlwaysUsageDescription
权限这个地方得注意。参考了高德和苹果的文档你会发现，他们说发恰恰相反,如果你按照高德和苹果3个权限全给的话或者高德的ios11+的，那你会弹不出权限提示。所以大家请采用以下的权限配置
- 打开info.plistt
- 添加NSLocationWhenInUseUsageDescription(表示应用在前台的时候可以搜到更新的位置信息)和NSLocationAlwaysUsageDescription(申请Always权限，以便应用在前台和后台都可以获取到更新的位置数据)
- App Transport Security Setting展开后的Allow Arbitrary Loads 为YES
这个权限很神奇，只添加NSLocationWhenInUseUsageDescription也可以，前台后台都可以获取到位置，但是3个权限全部添加的话，会出现弹出不了权限提示框的问题。所以大家添加NSLocationWhenInUseUsageDescription或者添加NSLocationWhenInUseUsageDescription和NSLocationAlwaysUsageDescription就可以了。
如果要支持后台持续定位，还需要配置以下
- 打开xcode，点击项目
- 选择Capabilities,把Background Modes打开为ON，然后打勾Loaction updates
使用
创建一个position.js,把操作封装起来
import { init, Geolocation,setAllowsBackgroundLocationUpdates} from "react-native-amap-geolocation";
//初始化sdk
export async function geolocationInit() {
//设置高德key
await init({
ios: "你的key",
});
//开启后台定位,必须要Background Modes打开为ON，勾选Loaction updates，不然会报错！
//必须在开始定位之前或者在定位stop的时候设置
setAllowsBackgroundLocationUpdates(true);
}
//只获得一次当前地理位置
export function getCurrentPosition(){
Geolocation.getCurrentPosition(position=>console.log(position));
}
//注册一个监听，它会每隔一段时间返回当前地理位置
export function watchPosition(){
if(!this.watchId){
this.watchId=Geolocation.watchPosition(position=>console.log(position)));
}
}
...按照自己的需要封装
创建一个index.js 来使用定位，需要注意一点，高德sdk默认返回逆地理编码信息为false,如果要返回的话在AMapGeolocation.xcodeproj添加_manager.locatingWithReGeocode=YES
import React, { Component } from 'react';
import { SafeAreaView, View } from 'react-native';
import {setInterval} from "react-native-amap-geolocation";
import {getCurrentPosition,watchPosition,getCurrentPosition} from "./position"
export default class Main extends Component {
componentDidMount() {
//初始化定位组件
geolocationInit();
//启动监听
watchPosition();
//获取一次定位,getCurrentPosition会暂停掉监听
//getCurrentPosition()
//设置每隔15S获取一次定位
setInterval(15000);
}
render() {
return (
<SafeAreaView>
<View>
...ui+操作
</View>
</SafeAreaView>
);
}
}
官方文档安装指南
官方API文档
官方例子(不了解如何使用，推荐参考)
这里要提醒一下，持续定位第一次获取的时候会返回多条定位信息，注意监听不要多次创建还有像设置间隔获取，或者指定多少距离才更新位置的话，一定要创建监听之后再设置，否则会每次更新位置时返回信息的返回多条信息。在模拟器上开启监听持续定位，不会按照预想的每隔一段时间返回一次地理位置，但是真机会隔一段时间返回一次，一切正常。
安卓只要react-native link成功就不用配置了，如果失败请参考作者github的指南配置。
