react-native-civi-map

地图组件使用描述文件 第一步：安装组件 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文件中配置地图使用的相关权限，如下：

<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;

const annotionList=[{pointName:'中央公园快递费；看的风景收到了附件撒旦教发送点击',coordinate:'31.2716,118.3645',address:'中山南路253号',description:'驳回',value:3,target:'point',targetValue:'3'}, {pointName:'滨江公园',coordinate:'31.2716,118.3655',address:'银湖中路76号打客服阿里斯顿家乐福静安寺亮点分ADSL就发来看时代峻峰按键手动阀',description:'通过',value:2,target:'point',targetValue:'2'}, {pointName:'金鹰国际',coordinate:'31.2726,118.3645',address:'长江中路33号',description:'待测评',value:0,target:'point',targetValue:'0'}, {pointName:'方特欢乐世界',coordinate:'31.2732,118.3785',address:'九华山中路1号',description:'待审核',value:1,target:'point',targetValue:'1'}];

const annotionList2=[{pointName:'中央公园快递费；看的风景收到了附件撒旦教发送点击',coordinate:'31.2716,118.3645',address:'中山南路253号',description:'驳回',value:3,target:'point',targetValue:'3'}, {pointName:'方特欢乐世界',coordinate:'31.2732,118.3785',address:'九华山中路1号',description:'待审核',value:1,target:'point',targetValue:'1'}];

const routePlanning=[{pointName:'出发点',coordinate:'31.2716,118.3655'},{pointName:'途径点1',coordinate:'31.3716,118.3655'},{pointName:'途径点2',coordinate:'31.4716,118.2655'}, {pointName:'途径点3',coordinate:'31.5716,118.3755'},{pointName:'途径点4',coordinate:'31.6716,118.6655'},{pointName:'途径点5',coordinate:'31.6916,118.4655'},{pointName:'途径点6',coordinate:'31.6916,118.5655'}, {pointName:'途径点7',coordinate:'31.7116,118.3955'},{pointName:'途径点8',coordinate:'31.7716,118.6655'},{pointName:'终点',coordinate:'31.8716,118.9655'},];

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, } });