最近在学习react-native和QT

用React Native开源高德地图定位组件编写的Demo

reactnative jackton 1161℃ 0评论

高德安卓定位SDK的React Native版本. AMap Android Location SDK.

一、安装组件

npm install react-native-amap-location –save

二、配置组件

1、更新Gradle Settings

在文件 android/settings.gradle 更新

include ‘:reactamaplocation’
           project(‘:reactamaplocation’).projectDir = new File(rootProject.projectDir, ‘../node_modules/react-native-amap-location’)

2、更新app Gradle Build

在文件 android/app/build.gradle 更新

dependencies {

compile project(‘:reactamaplocation’)
}

3、更新MainApplication

在文件 MainApplication.java 更新

 import com.xiaobu.amap.AMapLocationReactPackage;

@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
 new AMapLocationReactPackage()); // <– Register package here
}

4、添加service, api key 和权限 apikey要去高德开放平台注册申请 高德控制台  怎么申请key平台有帮助文档

在文件 AndroidManifest.xml 更新

    <!–用于进行网络定位–>
   <uses-permission android:name=”android.permission.ACCESS_COARSE_LOCATION”></uses-permission>
   <!–用于访问GPS定位–>
   <uses-permission android:name=”android.permission.ACCESS_FINE_LOCATION”></uses-permission>
  <!–获取运营商信息,用于支持提供运营商信息相关的接口–>
  <uses-permission android:name=”android.permission.ACCESS_NETWORK_STATE”></uses-permission>
  <!–用于访问wifi网络信息,wifi信息会用于进行网络定位–>
 <uses-permission android:name=”android.permission.ACCESS_WIFI_STATE”></uses-permission>
 <!–这个权限用于获取wifi的获取权限,wifi信息会用来进行网络定位–>
 <uses-permission android:name=”android.permission.CHANGE_WIFI_STATE”></uses-permission>
 <!–用于访问网络,网络定位需要上网–>
 <uses-permission android:name=”android.permission.INTERNET”></uses-permission>
 <!–用于读取手机当前的状态–>
 <uses-permission android:name=”android.permission.READ_PHONE_STATE”></uses-permission>
 <!–写入扩展存储,向扩展卡写入数据,用于写入缓存定位数据–>
 <uses-permission android:name=”android.permission.WRITE_EXTERNAL_STORAGE”></uses-permission>


<application
android:allowBackup=”true”
android:label=”@string/app_name”
android:icon=”@mipmap/ic_launcher”
android:theme=”@style/AppTheme”>
<service android:name=”com.amap.api.location.APSService”></service>
 <meta-data
    android:name=”com.amap.api.v2.apikey”
    android:value=”Your api key here”/>//这是你申请的Key值

 

5、准备工作做好了 开始编写代码

    import React, {
Component
} from ‘react’
import {
StyleSheet,
Text,
View,
ListView,
Image,
TouchableOpacity,
ToastAndroid,
PixelRatio
} from ‘react-native’;
import AMapLocation from ‘react-native-amap-location’;

class MapComponent extends Component {
constructor(props) {
super(props);
this.state = {
accuracy: 10,
adCode: “310114”,
address: “上海市嘉定区嘉三路靠近同济大学嘉定校区华楼”,
altitude: 0,
bearing: 0,
city: “上海市”,
cityCode: “021”,
country: “中国”,
district: “嘉定区”,
latitude: 31.285728,
locationDetail: “-1”,
locationType: 4,
longitude: 121.217404,
poiName: “同济大学嘉定校区华楼”,
provider: “lbs”,
province: “上海市”,
satellites: 0,
speed: 0,
street: “嘉松北路”,
streetNum: “6128号”,
errorinfo:”,
};
}
componentDidMount() {

//添加监听 开始获取位置
this.listener = AMapLocation.addEventListener((data) => this.listenerShow(data));
AMapLocation.startLocation({
accuracy: ‘HighAccuracy’,
killProcess: true,
needDetail: true,
});
}

listenerShow(result){
//console.log(‘data’, result);
if(result.errorInfo){
this.setState({errorinfo:result.errorInfo})
}
else{
this.setState({
accuracy: result.accuracy,
adCode: result.adCode,
address: result.address,
altitude: result.altitude,
bearing: result.bearing,
city: result.city,
cityCode: result.cityCode,
country: result.country,
district: result.district,
latitude: result.latitude,
locationDetail: result.locationDetail,
locationType: result.locationType,
longitude: result.longitude,
poiName: result.poiName,
provider: result.provider,
province: result.province,
satellites: result.satellites,
speed: result.speed,
street: result.street,
streetNum: result.streetNum,
});
}
}

componentWillUnmount() {

//停止获取位置,移除监听
AMapLocation.stopLocation();
this.listener.remove();
}

render() {
let errorinfo=”错误信息:”+this.state.errorinfo;
let accuracy=”accuracy:”+this.state.accuracy.toString();
let adCode=”adCode:”+this.state.adCode;
let address=”address:”+this.state.address;
let altitude=”altitude:”+this.state.altitude.toString();
let bearing=”bearing:”+this.state.bearing.toString();
let city=”city:”+this.state.city;
let cityCode=”cityCode:”+this.state.cityCode;
let country=”country:”+this.state.country;
let district=”district:”+this.state.district;
let latitude=”latitude:”+this.state.latitude.toString();
let locationDetail=”locationDetail:”+this.state.locationDetail;
let locationType=”locationType:”+this.state.locationType.toString();
let longitude=”longitude:”+this.state.longitude.toString();
let poiName=”poiName:”+this.state.poiName;
let provider=”provider:”+this.state.provider;
let province=”province:”+this.state.province;
let satellites=”satellites:”+this.state.satellites.toString();
let speed=”speed:”+this.state.speed.toString();
let street=”street:”+this.state.street;
let streetNum=”streetNum:”+this.state.streetNum;
return (
<View style={styles.outerViewStyle}>
<Text style={styles.textStyle}>{errorinfo}</Text>
<Text style={styles.textStyle}>{accuracy}</Text>
<Text style={styles.textStyle}>{adCode}</Text>
<Text style={styles.textStyle}>{address}</Text>
<Text style={styles.textStyle}>{altitude}</Text>
<Text style={styles.textStyle}>{bearing}</Text>
<Text style={styles.textStyle}>{city}</Text>
<Text style={styles.textStyle}>{cityCode}</Text>
<Text style={styles.textStyle}>{country}</Text>
<Text style={styles.textStyle}>{district}</Text>
<Text style={styles.textStyle}>{latitude}</Text>
<Text style={styles.textStyle}>{locationDetail}</Text>
<Text style={styles.textStyle}>{locationType}</Text>
<Text style={styles.textStyle}>{longitude}</Text>
<Text style={styles.textStyle}>{poiName}</Text>
<Text style={styles.textStyle}>{provider}</Text>
<Text style={styles.textStyle}>{province}</Text>
<Text style={styles.textStyle}>{satellites}</Text>
<Text style={styles.textStyle}>{speed}</Text>
<Text style={styles.textStyle}>{street}</Text>
<Text style={styles.textStyle}>{streetNum}</Text>
</View>
);
}

}

const styles = StyleSheet.create({
outerViewStyle: {
flex: 1,
flexDirection: ‘column’,
alignItems: ‘center’,
//justifyContent:’center’,
},
textStyle:{
color: ‘red’,
fontSize: 16,
},

});
export default MapComponent;

6、效果图

转载请注明:Coding » 用React Native开源高德地图定位组件编写的Demo

喜欢 (0)

您必须 登录 才能发表评论!