ReactNative 百度地图

最新推荐文章于 2024-04-11 09:57:54 发布

2401_84123357

最新推荐文章于 2024-04-11 09:57:54 发布

阅读量1.2k

点赞数 21

分类专栏：程序员文章标签： react native react.js javascript

本文链接：https://blog.youkuaiyun.com/2401_84123357/article/details/137398753

版权

程序员专栏收录该内容

470 篇文章

订阅专栏

本文详细介绍了如何在React Native项目中集成百度地图，包括在Android和iOS平台上的配置步骤，涉及settings.gradle、build.gradle、MainApplication.java、AndroidManifest.xml的修改以及Xcode的设置。在Android端，重点是添加权限和API_KEY配置；在iOS端，涉及添加库文件、框架和资源文件等操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

(1)在settings.gradle中添加以下内容

include

‘:react-native-baidu-map’

project(‘:react-native-baidu-map’)

.projectDir =

new File(settingsDir,

‘…/node_modules/react-native-baidu-map/android’)

(2)在build.gradle中添加：

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

(3) 修改MainApplication.Java 文件

添加：new BaiduMapPackage(getApplicationContext())

例如：

@Override

protected List<ReactPackage> getPackages() {

return Arrays.<ReactPackage>asList(

new MainReactPackage(),

new BaiduMapPackage(getApplicationContext())

);

}

(4) 修改AndroidMainifest.xml 文件

此文件有2处需要配置：

1）配置各种权限

2）添加com.baidu.lbsapi.API_KEY

完整权限配置：

<uses-permission android:name=“android.permission.ACCESS_COARSE_LOCATION”>

</uses-permission>

<uses-permission android:name=“android.permission.ACCESS_FINE_LOCATION”>

</uses-permission>

<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

“3Hk70Z0e6N3hDRQZwuLFAlgLqB5B4ak7”

注意：API_key需要自己去百度地图API申请！

(5)运行

使用命令运行项目：

npm

install

react-

native

run

-android

按道理说这样配置完成项目就已经能跑了，但是手机却出错了

QQ20170331-164649@2x.png

百度了一下找到了解决方案：http://www.open-open.com/lib/view/open1477469117948.html

然后运行成功啦_上效果图

IMG_0914.JPG

2.IOS运行

(1)打开文件

使用Xcode打开新建项目中ios目录中的BaiDuMapDemo.xcodeproj文件

(2)配置

1）Project navigator->Libraries->Add Files to 选择 react-native-baidu-map/ios/RCTBaiduMap.xcodeproj

QQ20170331-170747.png

2）Project navigator->Build Phases->Link Binary With Libraries 加入 libRCTBaiduMap.a

QQ20170331-171006.png

3）将react-native-baidu-map/ios/lib直接拷贝到新建项目ios目录中，拖动目录到Xcode项目的根目录下，这时Project navigator->Build Settings->Search Paths， Framework search paths 会自动添加 xxx/ios/lib，Header search paths 自动添加 xxx/ios/RCTBaiduMap

QQ20170331-171755.png

4）添加依赖, react-native-baidu-map/ios/lib 下的全部 framwordk(上一步拷贝lib时这些已经自动添加，可省略)， CoreLocation.framework和QuartzCore.framework、OpenGLES.framework、SystemConfiguration.framework、CoreGraphics.framework、Security.framework、libsqlite3.0.tbd（xcode7以前为 libsqlite3.0.dylib）、CoreTelephony.framework 、libstdc++.6.0.9.tbd（xcode7以前为libstdc++.6.0.9.dylib）

QQ20170331-172020.png

5）添加 BaiduMapAPI_Map.framework/Resources/mapapi.bundle

QQ20170331-172144.png

6）AppDelegate.m init 初始化

#import

“RCTBaiduMapViewManager.h”

(BOOL)application:

(UIApplication *)application didFinishLaunchingWithOptions:

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则近万的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：Android）

最后

针对Android程序员，我这边给大家整理了一些资料，包括不限于高级UI、性能优化、架构师课程、NDK、混合式开发（ReactNative+Weex）微信小程序、Flutter等全方面的Android进阶实践技术；希望能帮助到大家，也节省大家在网上搜索资料的时间来学习，也可以分享动态给身边好友一起学习！