《React-Native系列》37、 ReactNative百度地图开源组件使用
来源:互联网 发布:mac 任务管理器 编辑:程序博客网 时间:2024/05/31 19:36
上一篇文章写了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())
@Overrideprotected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage(), new BaiduMapPackage(getApplicationContext()) );}
此文件有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';
到此,我们已经集成好了这个开源的百度地图插件。
再次感谢开源作者:https://github.com/lovebing/react-native-baidu-map
- 《React-Native系列》37、 ReactNative百度地图开源组件使用
- 《React-Native系列》37、 ReactNative百度地图开源组件使用
- 《React-Native系列》36、 ReactNative地图组件
- 《React-Native系列》36、 ReactNative地图组件
- ReactNative系列之十二图标组件react-native-vector-icons的使用
- 《React-Native系列》38、 ReactNative混合组件封装
- 《React-Native系列》38、 ReactNative混合组件封装
- react native Touchable 系列组件使用详解
- 【原创】东方耀reactnative 视频31之-开源导航组件 react-native-tab-navigator
- 【原创】东方耀reactnative 视频32之-开源导航组件 react-native-side-menu
- ReactNative组件-react-native-scrollable-tab-view
- React Native 开源组件
- React Native 高德地图组件的使用(react-native-amap3d)
- React Native 高德地图组件的使用(react-native-amap3d)
- React Native Touchable系列组件
- react-native开源组件react-native-wechat学习
- React Native按钮详解|Touchable系列组件使用详解
- React Native系列——Navigator组件的使用介绍
- 快速排序
- ubuntu(window)系统下的git客户端搭建
- 最全的常用正则表达式
- golang如何优雅处理退出
- javascript向上向下遍历
- 《React-Native系列》37、 ReactNative百度地图开源组件使用
- AppScan系列——web安全测试---AppScan扫描工具
- 133. Clone Graph
- 项目管理和你想象的不一样
- 重构第六章读书笔记(每次命名都不统一。。)
- RSync实现文件同步备份配置详解
- xml数字签名
- 【JQuery-WEUI】Notification-通知
- java逆转字符串