react-native-civi-map v1.0.2
地图组件使用描述文件 第一步:安装组件 npm i react-native-civi-map --save
第二步:手动配置权限等: Android配置: 1.在android/setting.gradle文件中添加以下语句,将程序包引入到项目中 include ':react-native-civi-map' project(':react-native-civi-map').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-civi-map/android')
2.在android/app/build.gradle文件的dependencies下添加项目依赖 compile project(':react-native-civi-map')
3.在android/app/src/main/java/com/mymaptest/MainApplication.java文件中添加包 import com.example.reactnativecivimap.CiviMapPackage;
@Override protected List getPackages() { return Arrays.asList( new MainReactPackage(), new CiviMapPackage() //该处为添加的相关包 ); } 4.在android/app/src/main/AndroidManifest.xml文件中配置地图使用的相关权限,如下:
<!--允许程序设置内置sd卡的写权限-->
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<!--允许程序获取网络状态-->
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<!--允许程序访问WiFi网络信息-->
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<!--允许程序读写手机状态和身份-->
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<!--允许程序访问CellID或WiFi热点来获取粗略的位置-->
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.CHANGE_WIFI_STATE" />
<uses-permission android:name="android.permission.WAKE_LOCK" />
5.在android/app/src/main/AndroidManifest.xml文件中的标签内配置高德地图使用的appkey。 其中,高德地图的appkey在高德地图官网中申请,
6.当启动导航组件时,需在android/app/src/main/AndroidManifest.xml文件中的标签内添加以下语句:
第三步:地图组件调用 import {MapView,MapFunction} from 'react-native-civi-map'
const SCREEN_WIDTH=Dimensions.get('window').width; const SCREEN_HEIGHT=Dimensions.get('window').height;
type Props = {}; let self=null; export default class App extends Component { constructor(props) { super(props); self=this; this.state = { annotionState:true, annotionList:annotionList, }; }
render() { return ( <MapView style={{width:SCREEN_WIDTH,height:SCREEN_HEIGHT-30}} showRegion="31.2716,118.3645" district="芜湖市" annotions={JSON.stringify(self.state.annotionList)} onClick={(res)=>{self._onClickMarker(res)}} /> <TouchableOpacity onPress={()=>{self._onRoute()}}> 路线规划 <TouchableOpacity onPress={()=>{self._onLocate()}}> 定位 <TouchableOpacity onPress={()=>{self._onGetLocationInfo()}}> 获取用户位置 <TouchableOpacity onPress={()=>{self._onGetPointInfo()}}> 点位查询 <TouchableOpacity onPress={()=>{self._onChangeState()}}> 标记点位状态切换
</View>
</View>
);
}
_onClickMarker(res){
console.log('点击Marker');
console.log(res);
}
_onRoute(){
MapFunction.routePlanning(JSON.stringify(routePlanning));
}
_onLocate(){
MapFunction.getLocation();
}
_onGetLocationInfo(){
MapFunction. getLocationInfo('31.2716,118.3655,0',(res)=>{
console.log('B');
console.log(res);
});
}
_onGetPointInfo(){
// MapFunction. getPointInfo('公园,0553,0',(res)=>{
// console.log('B');
// console.log(res);
// });
MapFunction. searchPoint('公园,0553',(res)=>{
console.log('B');
console.log(res);
});
}
_onChangeState(){
if(self.state.annotionList===annotionList){
self.setState({
annotionList:annotionList2,
});
}else {
self.setState({
annotionList:annotionList,
});
}
};
}
const styles = StyleSheet.create({ rowFrame:{ flexDirection:'row', width:SCREEN_WIDTH, paddingVertical:5, }, container: { flex: 1, backgroundColor: '#F5FCFF', }, btnFrame:{ position:'absolute', }, btnView:{ paddingHorizontal:10, paddingVertical:5, margin:5, borderRadius:3, borderColor:'orange', borderWidth:1, } });