react-native-baidu-map-x

• 目前仅支持android
• baidu-map-sdk:4.5.2

导入

• 配置settings.gradle

include ':react-native-baidu-map-x'

project(':react-native-baidu-map-x').projectDir = new File(settingsDir, '../node_modules/react-native-baidu-map-x/android')

• 配置build.gradle(app)

compile project(':react-native-baidu-map-x')

• 配置MainApplication.java

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
            ...
              //add BaiduMapPackage
              new BaiduMapPackage(getApplicationContext())
            ...
      );
    }

• 配置AndroidMainifest.xml -权限

<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>

    <uses-permission android:name="android.permission.READ_PHONE_STATE" />
    //读取设备硬件信息，统计数据
    <uses-permission android:name="com.android.launcher.permission.READ_SETTINGS" />
    //读取系统信息，包含系统版本等信息，用作统计
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    //获取设备的网络状态，鉴权所需网络代理
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
    //允许sd卡写权限，需写入地图数据，禁用后无法显示地图
    <uses-permission android:name="android.permission.WRITE_SETTINGS" />
    //获取统计数据
    <uses-permission android:name="android.permission.GET_TASKS" />
    //鉴权所需该权限获取进程列表
    <uses-permission android:name="android.permission.CAMERA" />
    <!-- 这个权限用于进行网络定位-->
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <!-- 这个权限用于访问GPS定位-->
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

    <!-- 获取运营商信息，用于支持提供运营商信息相关的接口-->
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <!-- 这个权限用于获取wifi的获取权限，wifi信息会用来进行网络定位-->
    <uses-permission android:name="android.permission.CHANGE_WIFI_STATE" />

    <!-- 访问网络，网络定位需要上网-->
    <uses-permission android:name="android.permission.INTERNET" />
    <!-- SD卡读取权限，用户写入离线定位数据-->
    <uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS" />

• 配置AndroidMainifest.xml -百度地图key（不添加无法显示地图）

<meta-data android:name="com.baidu.lbsapi.API_KEY" android:value="百度API KEY"/>

• 配置AndroidMainifest.xml -服务(调用导航和定位用)

<service android:name="com.baidu.location.f" android:enabled="true" android:process=":remote"> </service>

使用

import { MapView,ColorTypes,MapTypes, MapModule, Geolocation,Navi,Location } from 'react-native-baidu-map-x'

MapView Props 属性

| Name | Type | Default | Extra | ----------------------- |:-----:| :-------:| ------- | zoomControlsVisible | bool | false | Android only | trafficEnabled | bool | false | | baiduHeatMapEnabled | bool | false | | mapType | number| 1 | | zoom | number| 10 | | center | object| null | {latitude: 0, longitude: 0} | markers | array | [] | [marker, maker] | lines | array | [] | | circles |array|[]| | onMapStatusChangeStart | func | undefined| Android only | onMapStatusChange | func | undefined| | onMapStatusChangeFinish | func | undefined| Android only | onMapLoaded | func | undefined| | onMapClick | func | undefined| | onMapDoubleClick | func | undefined| | onMarkerClick | func | undefined| | onMarkerClick | func | undefined| | onLineClick | func | undefined|

Navi导航 Props 属性

| Name | Type | Default | Extra | ----------------------- |:-----:| :-------:| ------- | openBaiduMapNavi | func | undefined|

Location定位 Props 属性

| Name | Type | Default | Extra | ----------------------- |:-----:| :-------:| ------- | getLocation | promise | undefined|