react-native-s-baidumap v1.3.2

react-native-s-baidumap

百度地图 React Native 模块，同时支持ios和android，react native 0.60.0+。

支持模块：

• 基础定位 ✅
• 基础地图 ✅
• 个性化地图 ✅
• 离线地图 ✅
• 绘制点标记 ✅
• 绘制线 ✅
• 绘制弧线和面 ✅
• 自定义Infowindow
• 点聚合
• 绘制overlay
• POI检索 ✅
• 地点检索输入提示检索 ✅
• 地理编码 ✅
• 路线规划 ✅

DEMO预览

安装

npm i react-native-s-baidumap

或

yarn add react-native-s-baidumap

配置

如果你使用的react native的版本>=0.60.0,则无需做多余配置，只需要配置百度地图申请的key。

Android配置：

在 AndroidManifest 中添加：

<application>
    <meta-data
        android:name="com.baidu.lbsapi.API_KEY"
        android:value="你的key" />
</application>

IOS配置

第一步： 在Podfile文件中加入以下代码：

  pod 'BaiduMapKit', '5.1.0'
  pod 'BMKLocationKit', '1.8.0'

第二步： 在运行命令

cd ios && pod install

第三步： 等待安装成功后，进入ios工程文件夹，会看到一个.xcworkspace 结尾的文件 ，双击打开

第四步： 选中项目，右键添加文件 点击找到本项目node_modules下的react-native-s-baidumap -> iosLib -> RNSBaidumap, 将整个RNSBaidumap文件夹导入。

第五步： 需要添加桥接文件，选中项目右键，New File，选择h类型的头部文件创建，文件名为：你的项目名+-Bridging-Header，如：reactNativeSBaidumap-Bridging-Header。 然后在该文件中添加以下代码：

#import <React/RCTBridgeModule.h>
#import <React/RCTViewManager.h>
#import <React/RCTEventEmitter.h>
#import <BaiduMapAPI_Base/BMKBaseComponent.h>//引入base相关所有的头文件
#import <BaiduMapAPI_Map/BMKMapComponent.h>//引入地图功能所有的头文件
#import <BaiduMapAPI_Search/BMKSearchComponent.h>//引入检索功能所有的头文件
#import <BMKLocationkit/BMKLocationComponent.h> //定位头文件

第六步： 配置桥接文件 ：

第七步： 在AppDelegate.m文件中添加百度地图配置 在头部引入：

#import <BaiduMapAPI_Base/BMKBaseComponent.h>

在didFinishLaunchingWithOptions方法中配置：

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  
  // 要使用百度地图，请先启动BaiduMapManager
  BMKMapManager *mapManager = [[BMKMapManager alloc] init];
  // 如果要关注网络及授权验证事件，请设定generalDelegate参数
  BOOL ret = [mapManager start:@"你申请的key"  generalDelegate:nil];
  if (!ret) {
    NSLog(@"baidumap manager start failed!");
  }
  
  ..........
}

到此配置结束。

MapView Props 属性

MapView 方法

Marker属性

Polyline属性

Arc属性

Circle属性

Polygon属性

Geolocation Methods

定位方法

地理编码

逆地理编码

Search Methods

POI检索

地点检索

RoutePlan Methods

OfflineMap Methods

具体API用法可以参考example。