react-native 利用高德地图定位(react-nati
2019-01-10 本文已影响1119人
风中的猴子
最近公司的app需要加个定位功能,在github上找到了这个,亲测可用,记录一下。
react-native-amap-geolocation
基于高德地图
安装
npm install --save react-native-amap-geolocation
android
react-native link react-native-amap-geolocation
ios
在ios目录下新建Podfile
内容如下:
platform :ios, '8.0'
# The target name is most likely the name of your project.
target 'Your Target' do
# Your 'node_modules' directory is probably in the root of your project,
# but if not, adjust the `:path` accordingly
pod 'React', :path => '../node_modules/react-native', :subspecs => [
'Core',
'CxxBridge', # Include this for RN >= 0.47
'DevSupport', # Include this to enable In-App Devmenu if RN >= 0.43
'RCTText',
'RCTNetwork',
'RCTWebSocket', # Needed for debugging
'RCTAnimation', # Needed for FlatList and animations running on native UI thread
# Add any other subspecs you want to use in your project
]
# Explicitly include Yoga if you are using RN >= 0.42.0
pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
# Third party deps podspec link
pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
pod 'react-native-amap-geolocation', path: '../node_modules/react-native-amap-geolocation/lib/ios'
end
pod install
key
android
https://lbs.amap.com/api/android-location-sdk/guide/create-project/get-key
其他没有什么问题
这里主要说一下SHA1
release和debug要分别获取,不可以用同一个。
release:
找到项目release用的keystore在同目录下运行
keytool -v -list -keystore my-release-key.keystore
输入密码后
image.png
怎么生成keystore以及配置看这里:https://reactnative.cn/docs/signed-apk-android/
debug
找这个花了点时间,高德官网给的是windows下
mac下是在~/.android
这个隐藏目录里
cd ~/.android
keytool -v -list -keystore debug.keystore
拿到两个SHA1生成key
配置AndroidManifest.xml
官网已经给出了详细配置
https://lbs.amap.com/api/android-location-sdk/guide/android-location/getlocation
ios
相对android来说简单很多
只需要
Bundle Identifier
即可
调用
import { Geolocation } from "react-native-amap-geolocation";
const geolocationInit = async () => {
await Geolocation.init({
ios: "key",
android: "key"
});
Geolocation.setOptions({
interval: 3000,
distanceFilter: 20
});
Geolocation.addLocationListener(location => {
console.log(location);
});
}
geolocationInit();
Geolocation.start(); //开始定位
Geolocation.stop(); //获取到定位后需要手动关闭,持续定位ios审核不过
Geolocation.getLastLocation(); //获取最后一次定位的位置