433
社区成员
发帖
与我相关
我的任务
分享高德地图定位SDK 插件 – react-native-smart-amap-location
react-native-smart-amap-location
react-native 高德地图-定位SDK 插件, 支持ios与android
预览
安装
npm install react-native-smart-amap-location --save
安装 (iOS)
将RCTAMapLocation.xcodeproj作为Library拖进你的Xcode里的project中.
将RCTAMapLocation目录里Frameworks目录拖进主project目录下, 选择copy items if needed, create groups, 另外add to target不要忘记选择主project.
点击你的主project, 选择Build Phases -> Link Binary With Libraries, 将RCTAMapLocation.xcodeproj里Product目录下的libRCTAMapLocation.a拖进去.
同上位置, 选择Add items, 将系统库libstdc++.6.0.9.tbd加入.
同上位置, 选择Add items, 将系统库libc++.tbd加入.
同上位置, 选择Add items, 将系统库libz.tbd加入.
同上位置, 选择Add items, 将系统库Security.framework加入.
同上位置, 选择Add items, 将系统库CoreTelephony.framework加入.
同上位置, 选择Add items, 将系统库SystemConfiguration.framework加入.
同上位置, 选择Add items, 将系统库JavaScriptCore.framework加入.
如需要开启后台定位, 选择Capabilities, 找到Background Modes选择ON, 勾选上Location Updates.
选择Build Settings, 找到Header Search Paths, 确认其中包含$(SRCROOT)/../../../react-native/React, 模式为recursive.
同上位置, 找到Framework Search Paths, 加入$(PROJECT_DIR)/Frameworks.
点击在Libraries下已拖进来的RCTAMapLocation.xcodeproj, 选择Build Settings, 找到Framework Search Paths, 将$(SRCROOT)/../../../ios/Frameworks替换成$(SRCROOT)/../../../../ios/Frameworks.
在info.plist中加入Privacy – Location When In Use Usage Description属性(ios 10)
在info.plist中加入Allow Arbitrary Loads属性, 并设置值为YES(ios 10)
在AppDelegate.m中
...
#import <AMapFoundationKit/AMapFoundationKit.h> //引入高德地图核心包
...
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
[AMapServices sharedServices].apiKey = @"请填写您的key"; //设置高德地图SDK服务key
...
}
...
安装 (Android)
在android/settings.gradle中
...
include ':react-native-smart-amap-location'
project(':react-native-smart-amap-location').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-smart-amap-location/android')
在android/app/build.gradle中
...
dependencies {
...
// From node_modules
compile project(':react-native-smart-amap-location')
}
在MainApplication.java中
...
import com.reactnativecomponent.amaplocation.RCTAMapLocationPackage; //import package
...
/**
* A list of packages used by the app. If the app uses additional views
* or modules besides the default ones, add more packages here.
*/
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new RCTAMapLocationPackage() //register Module
);
}
...
在AndroidManifest.xml中, 加入所需权限
...
<!--*************************高德地图-定位所需要权限*************************-->
<!-- Normal Permissions 不需要运行时注册 -->
<!--获取运营商信息，用于支持提供运营商信息相关的接口-->
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<!--用于访问wifi网络信息，wifi信息会用于进行网络定位-->
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<!--这个权限用于获取wifi的获取权限，wifi信息会用来进行网络定位-->
<uses-permission android:name="android.permission.CHANGE_WIFI_STATE" />
<uses-permission android:name="android.permission.CHANGE_CONFIGURATION" />
<!-- 请求网络 -->
<uses-permission android:name="android.permission.INTERNET" />
<!-- 不是SDK需要的权限，是示例中的后台唤醒定位需要的权限 -->
<!--<uses-permission android:name="android.permission.WAKE_LOCK" />-->
<!-- 需要运行时注册的权限 -->
<!--用于进行网络定位-->
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<!--用于访问GPS定位-->
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<!--用于提高GPS定位速度-->
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<!--写入扩展存储，向扩展卡写入数据，用于写入缓存定位数据-->
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<!--读取缓存数据-->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<!--用于读取手机当前的状态-->
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<!-- 更改设置 -->
<uses-permission android:name="android.permission.WRITE_SETTINGS" />
<!--*************************高德地图-定位所需要权限*************************-->
...
在AndroidManifest.xml中, application标签内加入
...
<!--高德地图SDK key设置-->
<meta-data
android:name="com.amap.api.v2.apikey"
android:value="请填写您的key"/>
<!--高德地图APS服务设置-->
<service android:name="com.amap.api.location.APSService" >
</service>
...
完整示例
点击这里 ReactNativeComponentDemos
使用简介
Install the package from npm withnpm install react-native-smart-amap-location –save. Then, require it from your app’s JavaScript files withimport Barcode from ‘react-native-smart-amap-location’.
import React, {
Component
} from 'react'
import {
StyleSheet,
View,
Text,
Alert,
NativeAppEventEmitter,
ActivityIndicator,
ActivityIndicatorIOS,
ProgressBarAndroid,
} from 'react-native'
import AMapLocation from 'react-native-smart-amap-location'
import Button from 'react-native-smart-button'
import AppEventListenerEnhance from 'react-native-smart-app-event-listener-enhance'
class AMapLocationDemo extends Component {
// 构造
constructor(props) {
super(props);
// 初始状态
this.state = {};
}
componentDidMount() {
let viewAppearCallBack = (event) => {
AMapLocation.init(null) //使用默认定位配置
}
this.addAppEventListener(
this.props.navigator.navigationContext.addListener('didfocus', viewAppearCallBack),
NativeAppEventEmitter.addListener('amap.location.onLocationResult', this._onLocationResult)
)
}
componentWillUnmount () {
//停止并销毁定位服务
AMapLocation.cleanUp()
}
render() {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center', }}>
<Button
ref={ component => this._button_1 = component }
touchableType={Button.constants.touchableTypes.fade}
style={{margin: 10, width: 300, height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
textStyle={{fontSize: 17, color: 'white'}}
loadingComponent={
<View style={{flexDirection: 'row', alignItems: 'center'}}>
{this._renderActivityIndicator()}
<Text style={{fontSize: 17, color: 'white', fontWeight: 'bold', fontFamily: '.HelveticaNeueInterface-MediumP4',}}>努力定位中</Text>
</View>
}
onPress={this._showReGeocode}>
定位逆地理编码信息
</Button>
<Button
ref={ component => this._button_2 = component }
touchableType={Button.constants.touchableTypes.fade}
style={{margin: 10, width: 300, height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
textStyle={{fontSize: 17, color: 'white'}}
loadingComponent={
<View style={{flexDirection: 'row', alignItems: 'center'}}>
{this._renderActivityIndicator()}
<Text style={{fontSize: 17, color: 'white', fontWeight: 'bold', fontFamily: '.HelveticaNeueInterface-MediumP4',}}>努力定位中</Text>
</View>
}
onPress={this._showLocation}>
定位地理编码信息
</Button>
</View>
)
}
_onLocationResult = (result) => {
if(result.error) {
Alert.alert(`错误代码: ${result.error.code}, 错误信息: ${result.error.localizedDescription}`)
}
else {
if(result.formattedAddress) {
Alert.alert(`格式化地址 = ${result.formattedAddress}`)
}
else {
Alert.alert(`纬度 = ${result.coordinate.latitude}, 经度 = ${result.coordinate.longitude}`)
}
}
if(this._button_1.state.loading) {
this._button_1.setState({
loading: false,
})
}
if(this._button_2.state.loading) {
this._button_2.setState({
loading: false,
})
}
}
//单次定位并返回逆地理编码信息
_showReGeocode = () => {
this._button_1.setState({
loading: true,
})
AMapLocation.getReGeocode()
}
//单次定位并返回地理编码信息
_showLocation = () => {
this._button_2.setState({
loading: true,
})
AMapLocation.getLocation()
}
_renderActivityIndicator() {
return ActivityIndicator ? (
<ActivityIndicator
style={{margin: 10,}}
animating={true}
color={'#fff'}
size={'small'}/>
) : Platform.OS == 'android' ?
(
<ProgressBarAndroid
style={{margin: 10,}}
color={'#fff'}
styleAttr={'Small'}/>
) : (
<ActivityIndicatorIOS
style={{margin: 10,}}
animating={true}
color={'#fff'}
size={'small'}/>
)
}
}
export default AppEventListenerEnhance(AMapLocationDemo)
定位配置参数 (ios)
locationOptions.locationMode 设定定位精度, 默认为百米误差内
locationOptions.pausesLocationUpdatesAutomatically 指定定位是否会被系统自动暂停。默认为YES。
locationOptions.allowsBackgroundLocationUpdates 是否允许后台定位。默认为NO。只在iOS 9.0及之后起作用。设置为YES的时候必须保证 Background Modes 中的 Location updates 处于选中状态，否则会抛出异常。
locationOptions.locationTimeout 指定单次定位超时时间,默认为10s。最小值是2s。注意单次定位请求前设置。
locationOptions.reGeocodeTimeout 指定单次定位逆地理超时时间,默认为5s。最小值是2s。注意单次定位请求前设置。
定位配置参数 (android)
locationOptions.locationMode 设置定位模式，可选的模式有高精度、仅设备、仅网络。默认为高精度模式
locationOptions.gpsFirst 设置是否gps优先，只在高精度模式下有效。默认关闭
locationOptions.allowsBackgroundLocationUpdates 是否允许后台定位。默认为NO
locationOptions.httpTimeout 设置网络请求超时时间。默认为30秒。在仅设备模式下无效
locationOptions.interval 设置连续定位间隔。
locationOptions.needAddress 设置是否返回逆地理地址信息。默认是true。
locationOptions.onceLocation 设置是否单次定位。默认是false
locationOptions.locationCacheEnable 设置是否开启缓存，默认为true。
locationOptions.onceLocationLatest 设置是否等待wifi刷新，默认为false.如果设置为true,会自动变为单次定位，持续定位时不要使用。
locationOptions.locationProtocol 设置网络请求的协议。可选HTTP或者HTTPS。默认为HTTP。
locationOptions.sensorEnable 设置是否使用传感器。默认是false。
方法
init
描述: 初始化定位
参数: locationOptions 类型: Object, 如使用默认值则传null
getReGeocode
描述: 单次定位并返回逆地理编码信息
getLocation
描述: 单次定位并返回地理编码信息
startUpdatingLocation
描述: 连续定位并返回位置信息. 注:连续定位的使用请参见上述的完整示例
stopUpdatingLocation
描述: 结束连接定位. 注:连续定位的使用请参见上述的完整示例
事件监听
全局事件: amap.location.onLocationResult
描述: 监听并获取定位信息
安装
npm install react-native-smart-amap-location --save
安装 (iOS)
将RCTAMapLocation.xcodeproj作为Library拖进你的Xcode里的project中.
将RCTAMapLocation目录里Frameworks目录拖进主project目录下, 选择copy items if needed, create groups, 另外add to target不要忘记选择主project.
点击你的主project, 选择Build Phases -> Link Binary With Libraries, 将RCTAMapLocation.xcodeproj里Product目录下的libRCTAMapLocation.a拖进去.
同上位置, 选择Add items, 将系统库libstdc++.6.0.9.tbd加入.
同上位置, 选择Add items, 将系统库libc++.tbd加入.
同上位置, 选择Add items, 将系统库libz.tbd加入.
同上位置, 选择Add items, 将系统库Security.framework加入.
同上位置, 选择Add items, 将系统库CoreTelephony.framework加入.
同上位置, 选择Add items, 将系统库SystemConfiguration.framework加入.
同上位置, 选择Add items, 将系统库JavaScriptCore.framework加入.
如需要开启后台定位, 选择Capabilities, 找到Background Modes选择ON, 勾选上Location Updates.
选择Build Settings, 找到Header Search Paths, 确认其中包含$(SRCROOT)/../../../react-native/React, 模式为recursive.
同上位置, 找到Framework Search Paths, 加入$(PROJECT_DIR)/Frameworks.
点击在Libraries下已拖进来的RCTAMapLocation.xcodeproj, 选择Build Settings, 找到Framework Search Paths, 将$(SRCROOT)/../../../ios/Frameworks替换成$(SRCROOT)/../../../../ios/Frameworks.
在info.plist中加入Privacy – Location When In Use Usage Description属性(ios 10)
在info.plist中加入Allow Arbitrary Loads属性, 并设置值为YES(ios 10)
在AppDelegate.m中
...
#import <AMapFoundationKit/AMapFoundationKit.h> //引入高德地图核心包
...
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
[AMapServices sharedServices].apiKey = @"请填写您的key"; //设置高德地图SDK服务key
...
}
...
安装 (Android)
在android/settings.gradle中
...
include ':react-native-smart-amap-location'
project(':react-native-smart-amap-location').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-smart-amap-location/android')
在android/app/build.gradle中
...
dependencies {
...
// From node_modules
compile project(':react-native-smart-amap-location')
}
在MainApplication.java中
...
import com.reactnativecomponent.amaplocation.RCTAMapLocationPackage; //import package
...
/**
* A list of packages used by the app. If the app uses additional views
* or modules besides the default ones, add more packages here.
*/
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new RCTAMapLocationPackage() //register Module
);
}
...
在AndroidManifest.xml中, 加入所需权限
...
<!--*************************高德地图-定位所需要权限*************************-->
<!-- Normal Permissions 不需要运行时注册 -->
<!--获取运营商信息，用于支持提供运营商信息相关的接口-->
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<!--用于访问wifi网络信息，wifi信息会用于进行网络定位-->
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<!--这个权限用于获取wifi的获取权限，wifi信息会用来进行网络定位-->
<uses-permission android:name="android.permission.CHANGE_WIFI_STATE" />
<uses-permission android:name="android.permission.CHANGE_CONFIGURATION" />
<!-- 请求网络 -->
<uses-permission android:name="android.permission.INTERNET" />
<!-- 不是SDK需要的权限，是示例中的后台唤醒定位需要的权限 -->
<!--<uses-permission android:name="android.permission.WAKE_LOCK" />-->
<!-- 需要运行时注册的权限 -->
<!--用于进行网络定位-->
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<!--用于访问GPS定位-->
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<!--用于提高GPS定位速度-->
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<!--写入扩展存储，向扩展卡写入数据，用于写入缓存定位数据-->
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<!--读取缓存数据-->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<!--用于读取手机当前的状态-->
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<!-- 更改设置 -->
<uses-permission android:name="android.permission.WRITE_SETTINGS" />
<!--*************************高德地图-定位所需要权限*************************-->
...
在AndroidManifest.xml中, application标签内加入
...
<!--高德地图SDK key设置-->
<meta-data
android:name="com.amap.api.v2.apikey"
android:value="请填写您的key"/>
<!--高德地图APS服务设置-->
<service android:name="com.amap.api.location.APSService" >
</service>
...
完整示例
点击这里 ReactNativeComponentDemos
使用简介
Install the package from npm withnpm install react-native-smart-amap-location –save. Then, require it from your app’s JavaScript files withimport Barcode from ‘react-native-smart-amap-location’.
import React, {
Component
} from 'react'
import {
StyleSheet,
View,
Text,
Alert,
NativeAppEventEmitter,
ActivityIndicator,
ActivityIndicatorIOS,
ProgressBarAndroid,
} from 'react-native'
import AMapLocation from 'react-native-smart-amap-location'
import Button from 'react-native-smart-button'
import AppEventListenerEnhance from 'react-native-smart-app-event-listener-enhance'
class AMapLocationDemo extends Component {
// 构造
constructor(props) {
super(props);
// 初始状态
this.state = {};
}
componentDidMount() {
let viewAppearCallBack = (event) => {
AMapLocation.init(null) //使用默认定位配置
}
this.addAppEventListener(
this.props.navigator.navigationContext.addListener('didfocus', viewAppearCallBack),
NativeAppEventEmitter.addListener('amap.location.onLocationResult', this._onLocationResult)
)
}
componentWillUnmount () {
//停止并销毁定位服务
AMapLocation.cleanUp()
}
render() {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center', }}>
<Button
ref={ component => this._button_1 = component }
touchableType={Button.constants.touchableTypes.fade}
style={{margin: 10, width: 300, height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
textStyle={{fontSize: 17, color: 'white'}}
loadingComponent={
<View style={{flexDirection: 'row', alignItems: 'center'}}>
{this._renderActivityIndicator()}
<Text style={{fontSize: 17, color: 'white', fontWeight: 'bold', fontFamily: '.HelveticaNeueInterface-MediumP4',}}>努力定位中</Text>
</View>
}
onPress={this._showReGeocode}>
定位逆地理编码信息
</Button>
<Button
ref={ component => this._button_2 = component }
touchableType={Button.constants.touchableTypes.fade}
style={{margin: 10, width: 300, height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
textStyle={{fontSize: 17, color: 'white'}}
loadingComponent={
<View style={{flexDirection: 'row', alignItems: 'center'}}>
{this._renderActivityIndicator()}
<Text style={{fontSize: 17, color: 'white', fontWeight: 'bold', fontFamily: '.HelveticaNeueInterface-MediumP4',}}>努力定位中</Text>
</View>
}
onPress={this._showLocation}>
定位地理编码信息
</Button>
</View>
)
}
_onLocationResult = (result) => {
if(result.error) {
Alert.alert(`错误代码: ${result.error.code}, 错误信息: ${result.error.localizedDescription}`)
}
else {
if(result.formattedAddress) {
Alert.alert(`格式化地址 = ${result.formattedAddress}`)
}
else {
Alert.alert(`纬度 = ${result.coordinate.latitude}, 经度 = ${result.coordinate.longitude}`)
}
}
if(this._button_1.state.loading) {
this._button_1.setState({
loading: false,
})
}
if(this._button_2.state.loading) {
this._button_2.setState({
loading: false,
})
}
}
//单次定位并返回逆地理编码信息
_showReGeocode = () => {
this._button_1.setState({
loading: true,
})
AMapLocation.getReGeocode()
}
//单次定位并返回地理编码信息
_showLocation = () => {
this._button_2.setState({
loading: true,
})
AMapLocation.getLocation()
}
_renderActivityIndicator() {
return ActivityIndicator ? (
<ActivityIndicator
style={{margin: 10,}}
animating={true}
color={'#fff'}
size={'small'}/>
) : Platform.OS == 'android' ?
(
<ProgressBarAndroid
style={{margin: 10,}}
color={'#fff'}
styleAttr={'Small'}/>
) : (
<ActivityIndicatorIOS
style={{margin: 10,}}
animating={true}
color={'#fff'}
size={'small'}/>
)
}
}
export default AppEventListenerEnhance(AMapLocationDemo)
定位配置参数 (ios)
locationOptions.locationMode 设定定位精度, 默认为百米误差内
locationOptions.pausesLocationUpdatesAutomatically 指定定位是否会被系统自动暂停。默认为YES。
locationOptions.allowsBackgroundLocationUpdates 是否允许后台定位。默认为NO。只在iOS 9.0及之后起作用。设置为YES的时候必须保证 Background Modes 中的 Location updates 处于选中状态，否则会抛出异常。
locationOptions.locationTimeout 指定单次定位超时时间,默认为10s。最小值是2s。注意单次定位请求前设置。
locationOptions.reGeocodeTimeout 指定单次定位逆地理超时时间,默认为5s。最小值是2s。注意单次定位请求前设置。
定位配置参数 (android)
locationOptions.locationMode 设置定位模式，可选的模式有高精度、仅设备、仅网络。默认为高精度模式
locationOptions.gpsFirst 设置是否gps优先，只在高精度模式下有效。默认关闭
locationOptions.allowsBackgroundLocationUpdates 是否允许后台定位。默认为NO
locationOptions.httpTimeout 设置网络请求超时时间。默认为30秒。在仅设备模式下无效
locationOptions.interval 设置连续定位间隔。
locationOptions.needAddress 设置是否返回逆地理地址信息。默认是true。
locationOptions.onceLocation 设置是否单次定位。默认是false
locationOptions.locationCacheEnable 设置是否开启缓存，默认为true。
locationOptions.onceLocationLatest 设置是否等待wifi刷新，默认为false.如果设置为true,会自动变为单次定位，持续定位时不要使用。
locationOptions.locationProtocol 设置网络请求的协议。可选HTTP或者HTTPS。默认为HTTP。
locationOptions.sensorEnable 设置是否使用传感器。默认是false。
方法
init
描述: 初始化定位
参数: locationOptions 类型: Object, 如使用默认值则传null
getReGeocode
描述: 单次定位并返回逆地理编码信息
getLocation
描述: 单次定位并返回地理编码信息
startUpdatingLocation
描述: 连续定位并返回位置信息. 注:连续定位的使用请参见上述的完整示例
stopUpdatingLocation
描述: 结束连接定位. 注:连续定位的使用请参见上述的完整示例
事件监听
全局事件: amap.location.onLocationResult
描述: 监听并获取定位信息
...全文
请发表友善的回复…
发表回复
