React Native中react-native-baidu-map的安装与使用

  • Z时代
  • 2024-01-10
  • 分类：综合

react

http://www.jianshu.com/p/be802c38e9f5

参考资料：

github官方网址 ：https://github.com/lovebing/react-native-baidu-map

步骤参照官方网址即可

安装

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

配置

settings.gradle

include ':react-native-baidu-map' 

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

build.gradle

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

MainApplication

new BaiduMapPackage(getApplicationContext())

AndroidMainifest.xml



//这个权限用于进行网络定位

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

//这个用于访问GPS定位

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

//用于方位WIFI网络信息 wifi信息会用于网络定位

<uses-permisssion android:name="android.permission.ACCESS_WIFI_STATE"/>

添加网络配置权限等

添加百度api key(非常重要) 不添加会只出现网格

<meta-data android:name="com.baidu.lbsapi.API_KEY"  android:value="此处为你申请的api值"/>

百度API的申请：

1.进入百度地图开放平台：

http://lbsyun.baidu.com/      //需要登录注册

2.进入API控制台



3创建应用



应用名称此处可随便写

*发布版SHA1：

步骤 :http://lbsyun.baidu.com/index.php?title=androidsdk/guide/key

第1步：运行进入控制台(window+R)



第2步：定位到.android文件夹下，输入cd .android



第3步：输入keytool -list -v -keystore debug.keystore，会得到三种指纹证书，选取SHA1类型的证书（**口令是android），例如：

其中keytool为jdk自带工具；keystorefile为Android 签名证书文件



输入keytool -list -v -keystore debug.keystore  此时的秘钥库口令为默认的： android

如果你已经打包成功  此处不是debug.keystore 而是你自己的签名文件的路径 比如:

keytool -list -v -keystore  F:\Java\jdk\bin\my-release-key.keystore  此时的秘钥库口令为你的签名证书的密码： ******

否则会出现只是网格定位不成功的情况


*包名在AndroidMainifest.xml中的 package:'包名'




使用：

官方文档非常详细

地址：https://github.com/lovebing/react-native-baidu-map/blob/master/demo/BaiduMapDemo.js




http://blog.csdn.net/codetomylaw/article/details/52712011

上一篇文章写了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中添加以下内容

[javascript] view

plain copy

  1. include ':app'  

  2. include ':react-native-baidu-map'  

  3. 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

完整文件如下：

[javascript] view

plain copy

  1. <manifest xmlns:android="http://schemas.android.com/apk/res/android"  

  2.     package="com.baidumapdemo"  

  3.     android:versionCode="1"  

  4.     android:versionName="1.0">  

  5.   

  6.     <!-- 这个权限用于进行网络定位-->  

  7.     <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"></uses-permission>  

  8.     <!-- 这个权限用于访问GPS定位-->  

  9.     <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"></uses-permission>  

  10.     <!-- 用于访问wifi网络信息，wifi信息会用于进行网络定位-->  

  11.     <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"></uses-permission>  

  12.   

  13.     <uses-permission android:name="android.permission.INTERNET" />  

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

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

  16.     <uses-permission android:name="com.android.launcher.permission.READ_SETTINGS" />  

  17.     <uses-permission android:name="android.permission.WAKE_LOCK"/>  

  18.     <uses-permission android:name="android.permission.CHANGE_WIFI_STATE" />  

  19.     <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />  

  20.     <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>  

  21.     <uses-permission android:name="android.permission.WRITE_SETTINGS" />  

  22.   

  23.     <uses-sdk  

  24.         android:minSdkVersion="16"  

  25.         android:targetSdkVersion="22" />  

  26.   

  27.     <application  

  28.       android:name=".MainApplication"  

  29.       android:allowBackup="true"  

  30.       android:label="@string/app_name"  

  31.       android:icon="@mipmap/ic_launcher"  

  32.       android:theme="@style/AppTheme">  

  33.   

  34.       <meta-data  

  35.           android:name="com.baidu.lbsapi.API_KEY"  

  36.           android:value="fclg9DDiwCwF1zChtZGbK3MUP4Ex68qg"/>  

  37.             

  38.       <activity  

  39.         android:name=".MainActivity"  

  40.         android:label="@string/app_name"  

  41.         android:configChanges="keyboard|keyboardHidden|orientation|screenSize">  

  42.         <intent-filter>  

  43.             <action android:name="android.intent.action.MAIN" />  

  44.             <category android:name="android.intent.category.LAUNCHER" />  

  45.         </intent-filter>  

  46.       </activity>  

  47.       <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />  

  48.     </application>  

  49.   

  50. </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源文件

[javascript] view

plain copy

  1. import BaiduMapDemo from './BaiduMapDemo';  


8、运行效果




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


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

以上是 React Native中react-native-baidu-map的安装与使用 的全部内容， 来源链接： utcz.com/z/381267.html

回到顶部