本文共 4828 字,大约阅读时间需要 16 分钟。
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值"/>
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,很显然不是我们想要的。
今天我们介绍一下一个开源的百度地图开源组件,详细描述它的使用方法。
开源地址:
百度地图 模块,支持 native 0.30+
好,我们来描述它的使用步骤,以及需要注意的问题,我是在的AS环境下使用。
为了这个组件,我新react-native init 了一个项目,npm install 等,这个过程不是本文重点,不了解的可以自行百度。
1、Install 安装
npm install react-native-baidu-map --save2、在settings.gradle中添加以下内容
栗子:
4、修改MainApplication. 文件
添加:new BaiduMapPackage(getApplicationContext())
@Overrideprotected ListgetPackages() { return Arrays. asList( new MainReactPackage(), new BaiduMapPackage(getApplicationContext()) );}
5、修改AndroidMainifest.xml 文件
此文件有2处需要注意
1)配置各种权限
2)添加com.baidu.lbsapi.API_KEY
完整文件如下:
6、解决:Authentication Error errorcode: 230 uid: -1 appid -1 msg: APP Scode码校验失败 错误
出现这个错误,是因为需要将com.baidu.lbsapi.API_KEY修改为我们自己的value。
这里就涉及到需要,可以参考文章
需要说明的是:在Mac下debug.keystore的目录是 /Users/xxx/.android/debug.keystore
申请完成后,value如下:
7、修改Demo程序
直接使用提供的Demo源文件
8、运行效果
到此,我们已经集成好了这个开源的百度地图插件。
再次感谢开源作者:https://github.com/lovebing/react-native-baidu-map