react-native-amap-geolocation這款插件接入了高德地圖定位模塊。支持 Android + iOS，提供盡可能完善的原生接口， 同時(shí)提供符合 Web 標(biāo)準(zhǔn)的 Geolocation API。
ios下的安裝
依次在命令下執(zhí)行以下2條命令
yarn add react-native-amap-geolocation
react-native link react-native-amap-geolocation
如果出現(xiàn)了link的相關(guān)報(bào)錯(cuò)的話，就需要手動(dòng)link一下
- 用xcode打開該項(xiàng)目
- 點(diǎn)擊項(xiàng)目的根目錄右鍵 add File to "項(xiàng)目名"
- 選擇并添加 node_modules/react-native-amap-geolocation/lib/ios/AMapGeolocation.xcodeproj （或從文件瀏覽器里將該文件拖拽到 Libraries）
- Build Phases ? Link Binary With Libraries 中選擇并添加 libAMapGeolocation.a
下載和安裝高德IOS SDK
- 下載基礎(chǔ)SDK(含IDFA)
- 下載定位SDK
- 將下載的AMapFoundationKit.framework 和 AMapLocationKit.framework 以及 項(xiàng)目自帶的ExternalAccessory.framework 添加到 Build Phases ? Link Binary With Libraries。
配置權(quán)限
高德地圖官方文檔權(quán)限參考
ios8-10權(quán)限 NSLocationWhenInUseUsageDescription和NSLocationAlwaysUsageDescription
ios11以上權(quán)限 NSLocationAlwaysAndWhenInUseUsageDescription和NSLocationWhenInUseUsageDescription
ios8-ios11+權(quán)限NSLocationWhenInUseUsageDescription、NSLocationAlwaysUsageDescription和NSLocationAlwaysAndWhenInUseUsageDescription
蘋果官方權(quán)限參考
ios11以上權(quán)限 NSLocationWhenInUseUsageDescription 和NSLocationAlwaysAndWhenInUseUsageDescription
ios11以下權(quán)限 NSLocationAlwaysUsageDescription
權(quán)限這個(gè)地方得注意。參考了高德和蘋果的文檔你會(huì)發(fā)現(xiàn)，他們說(shuō)發(fā)恰恰相反,如果你按照高德和蘋果3個(gè)權(quán)限全給的話或者高德的ios11+的，那你會(huì)彈不出權(quán)限提示。所以大家請(qǐng)采用以下的權(quán)限配置
- 打開info.plistt
- 添加NSLocationWhenInUseUsageDescription(表示應(yīng)用在前臺(tái)的時(shí)候可以搜到更新的位置信息)和NSLocationAlwaysUsageDescription(申請(qǐng)Always權(quán)限，以便應(yīng)用在前臺(tái)和后臺(tái)都可以獲取到更新的位置數(shù)據(jù))
- App Transport Security Setting展開后的Allow Arbitrary Loads 為YES
這個(gè)權(quán)限很神奇，只添加NSLocationWhenInUseUsageDescription也可以，前臺(tái)后臺(tái)都可以獲取到位置，但是3個(gè)權(quán)限全部添加的話，會(huì)出現(xiàn)彈出不了權(quán)限提示框的問(wèn)題。所以大家添加NSLocationWhenInUseUsageDescription或者添加NSLocationWhenInUseUsageDescription和NSLocationAlwaysUsageDescription就可以了。
如果要支持后臺(tái)持續(xù)定位，還需要配置以下
- 打開xcode，點(diǎn)擊項(xiàng)目
- 選擇Capabilities,把Background Modes打開為ON，然后打勾Loaction updates
使用
創(chuàng)建一個(gè)position.js,把操作封裝起來(lái)
import { init, Geolocation,setAllowsBackgroundLocationUpdates} from "react-native-amap-geolocation";
//初始化sdk
export async function geolocationInit() {
//設(shè)置高德key
await init({
ios: "你的key",
});
//開啟后臺(tái)定位,必須要Background Modes打開為ON，勾選Loaction updates，不然會(huì)報(bào)錯(cuò)！
//必須在開始定位之前或者在定位stop的時(shí)候設(shè)置
setAllowsBackgroundLocationUpdates(true);
}
//只獲得一次當(dāng)前地理位置
export function getCurrentPosition(){
Geolocation.getCurrentPosition(position=>console.log(position));
}
//注冊(cè)一個(gè)監(jiān)聽，它會(huì)每隔一段時(shí)間返回當(dāng)前地理位置
export function watchPosition(){
if(!this.watchId){
this.watchId=Geolocation.watchPosition(position=>console.log(position)));
}
}
...按照自己的需要封裝
創(chuàng)建一個(gè)index.js 來(lái)使用定位，需要注意一點(diǎn)，高德sdk默認(rèn)返回逆地理編碼信息為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();
//啟動(dòng)監(jiān)聽
watchPosition();
//獲取一次定位,getCurrentPosition會(huì)暫停掉監(jiān)聽
//getCurrentPosition()
//設(shè)置每隔15S獲取一次定位
setInterval(15000);
}
render() {
return (
<SafeAreaView>
<View>
...ui+操作
</View>
</SafeAreaView>
);
}
}
官方文檔安裝指南
官方API文檔
官方例子(不了解如何使用，推薦參考)
這里要提醒一下，持續(xù)定位第一次獲取的時(shí)候會(huì)返回多條定位信息，注意監(jiān)聽不要多次創(chuàng)建還有像設(shè)置間隔獲取，或者指定多少距離才更新位置的話，一定要?jiǎng)?chuàng)建監(jiān)聽之后再設(shè)置，否則會(huì)每次更新位置時(shí)返回信息的返回多條信息。在模擬器上開啟監(jiān)聽持續(xù)定位，不會(huì)按照預(yù)想的每隔一段時(shí)間返回一次地理位置，但是真機(jī)會(huì)隔一段時(shí)間返回一次，一切正常。
安卓只要react-native link成功就不用配置了，如果失敗請(qǐng)參考作者github的指南配置。
