前言
随着移动互联网的快速发展，地图功能已经成为了 APP 开发的标配。而百度地图作为国内最大的地图服务提供商之一，受到了众多开发者的青睐。如果你正在进行 React Native 开发，并且需要使用到百度地图，那么本文就为你提供了一个非常好用的 npm 包 @zzzkk2009/react-native-baidu-map。
安装
使用 npm 安装此包：
npm install @zzzkk2009/react-native-baidu-map --save
在 iOS 中，需要使用 CocoaPods 进行依赖配置。在项目根目录下创建一个名为 Podfile 的文件，并添加以下内容：
pod 'BaiduMapKit/Radar', '3.6.5' pod "react-native", :path => "../node_modules/react-native"
然后执行以下命令：
pod install
集成
iOS
在AppDelegate.m文件中导入 BaiduMapAPI_Base 模块：
#import <BaiduMapAPI_Base/BMKMapManager.h>
使用以下代码初始化：
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
BMKMapManager* mapManager = [[BMKMapManager alloc] init];
BOOL ret = [mapManager start:@"ZfTRDZ9YV7NlCoNmyGxi7cN4Eud4hMKG" generalDelegate:nil];
return ret;
}其中 ZfTRDZ9YV7NlCoNmyGxi7cN4Eud4hMKG 是你的百度地图开发者 Key。如果你不知道自己的 Key，可以前往百度地图开放平台进行申请。
Android
打开项目的 android/app/src/main/AndroidManifest.xml 文件，添加以下权限：
<manifest ... <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> <uses-permission android:name="android.permission.READ_PHONE_STATE"/> ... </manifest>
使用以下代码在应用程序类中初始化：
@Override
public void onCreate() {
super.onCreate();
// 初始化百度地图 SDK
SDKInitializer.initialize(getApplicationContext());
}使用
地图组件
使用以下代码在你的页面中引入地图组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ -
-----------
-----
-----
- ---- ---------------
------ ------------ ---- ------------------------------------
------ ------- ----- --- ------- --------------- -
-------- -
------ -
----- -------------------------
------------- --------------------
-------
--
-
-
----- ------ - -------------------
---------- -
----- --
--------------- ---------
----------- ---------
--
---- -
------ -------
------- -------
--
---Marker
使用以下代码在地图上添加 Marker：
-- -------------------- ---- -------
------ ----- ---- --------
------ -
-----------
-----
-----
- ---- ---------------
------ ------------- - ------ - ---- ------------------------------------
------ ------- ----- --- ------- --------------- -
-------- -
----- ------ - -
----------- - --------- ---------- ---------- ---------- --
------ ----------
--------- ----------------
--
------ -
----- -------------------------
------------- -------------------
------- ----------- --
---------------
-------
--
-
-
----- ------ - -------------------
---------- -
----- --
--------------- ---------
----------- ---------
--
---- -
------ -------
------- -------
--
---Polyline
使用以下代码在地图上添加 Polyline：
-- -------------------- ---- -------
------ ----- ---- --------
------ -
-----------
-----
-----
- ---- ---------------
------ ------------- - ------- -------- - ---- ------------------------------------
------ ------- ----- --- ------- --------------- -
-------- -
----- ------ - -
- --------- ---------- ---------- ---------- --
- --------- ---------- ---------- ---------- --
- --------- ---------- ---------- ---------- --
--
------ -
----- -------------------------
------------- -------------------
------- ---------------------- ---------- --
------- ---------------------- ---------- --
--------- --------------- --
---------------
-------
--
-
-
----- ------ - -------------------
---------- -
----- --
--------------- ---------
----------- ---------
--
---- -
------ -------
------- -------
--
---结语
通过本文的学习，你已经掌握了如何使用 @zzzkk2009/react-native-baidu-map 进行百度地图开发。如果你在使用中有任何问题，可以查看官方文档或者在 GitHub 上提出 Issue。相信你会在你的 React Native 应用中，添加出好用、优美的地图功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005555881e8991b448d28a0