《React-Native系列》37、 ReactNative百度地图开源组件使用

上一篇文章写了ReactNative自带的MapView，很显然不是我们想要的。

今天我们介绍一下一个开源的百度地图开源组件，详细描述它的使用方法。

开源地址：https://github.com/lovebing/react-native-baidu-map   

百度地图 React Native 模块，支持 react native 0.30+

好，我们来描述它的使用步骤，以及需要注意的问题，我是在Android的AS环境下使用。

为了测试这个组件，我新react-native init 了一个项目，npm install   等，这个过程不是本文重点，不了解的可以自行百度。

1、Install 安装

npm install react-native-baidu-map --save

2、在settings.gradle中添加以下内容

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

3、在build.gradle中添加：

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

栗子：

4、修改MainApplication.java 文件

添加：new BaiduMapPackage(getApplicationContext())

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

5、修改AndroidMainifest.xml 文件

此文件有2处需要注意

1）配置各种权限

2）添加com.baidu.lbsapi.API_KEY
完整文件如下：

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.baidumapdemo"
    android:versionCode="1"
    android:versionName="1.0">

    <!-- 这个权限用于进行网络定位-->
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"></uses-permission>
    <!-- 这个权限用于访问GPS定位-->
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"></uses-permission>
    <!-- 用于访问wifi网络信息，wifi信息会用于进行网络定位-->
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"></uses-permission>

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
    <uses-permission android:name="com.android.launcher.permission.READ_SETTINGS" />
    <uses-permission android:name="android.permission.WAKE_LOCK"/>
    <uses-permission android:name="android.permission.CHANGE_WIFI_STATE" />
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.WRITE_SETTINGS" />

    <uses-sdk
        android:minSdkVersion="16"
        android:targetSdkVersion="22" />

    <application
      android:name=".MainApplication"
      android:allowBackup="true"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:theme="@style/AppTheme">

      <meta-data
          android:name="com.baidu.lbsapi.API_KEY"
          android:value="fclg9DDiwCwF1zChtZGbK3MUP4Ex68qg"/>
          
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>
      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>

</manifest>

6、解决：Authentication Error errorcode: 230 uid: -1 appid -1 msg: APP Scode码校验失败  错误

出现这个错误，是因为需要将com.baidu.lbsapi.API_KEY修改为我们自己的value。

这里就涉及到需要申请百度地图API KEY，可以参考文章 http://blog.csdn.net/lb377463323/article/details/47170441

需要说明的是：在Mac下debug.keystore的目录是 /Users/xxx/.android/debug.keystore

申请完成后，value如下：

7、修改Demo程序

直接使用提供的Demo源文件

import BaiduMapDemo from './BaiduMapDemo';

8、运行效果

到此，我们已经集成好了这个开源的百度地图插件。

再次感谢开源作者：https://github.com/lovebing/react-native-baidu-map