react-native-s-baidumap-wu

react-native 百度地图组件,支持 Android + iOS

Usage no npm install needed!

<script type="module">
  import reactNativeSBaidumapWu from 'https://cdn.skypack.dev/react-native-s-baidumap-wu';
</script>

README

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 属性

|Prop|Type |Default|Description| |--|--|--|--| | zoomControlsVisible | bool |false |显示放大缩小按钮| | isTrafficEnabled | bool |false |显示交通路线| | isBaiduHeatMapEnabled | bool |false |显示百度热力图层| | baiduMapType | number |1 |地图类型 1: 标准地图 2: 卫星地图 3:空白地图| | locationEnabled | bool |false |显示当前定位位置| | myLocationData | object |{} |显示当前定位数据, 使用该属性前locationEnabled必须设置为true| | zoom | number |18 |地图缩放级别[4,21]| | zoomMinLevel | number |4 |地图最小缩放级别,最小4| | zoomMaxLevel | number |21 |地图最大缩放级别,最大21| | centerLatLng | object |{} |地图中心点位置{latitude: ..., longitude: ...}| | zoomGesturesEnabled | bool |true |是否允许缩放手势| | scrollGesturesEnabled | bool |true |是否允许拖拽手势| | overlookingGesturesEnabled | bool |true |是否允许俯视手势| | rotateGesturesEnabled | bool |true |是否允许旋转手势| | mapCustomStyleFileName | string |”“ |用于设置个性化地图的样式文件| | onMapLoaded | func |()=>{} |地图加载完成回调| | onMapClick | func |()=>{} |点击地图回调| | onMapPoiClick | func |()=>{} |点击地图地点回调| | onMapLongClick | func |()=>{} |长按地图回调| | onMapDoubleClick | func |()=>{} |双击地图回调| | onMapStatusChangeStart | func |()=>{} |地图状态开始变化回调| | onMapStatusChange | func |()=>{} |地图状态变化中回调| | onMapStatusChangeFinish | func |()=>{} |地图状态变化结束回调| | onMarkerClick | func |()=>{} |点击marker回调| | onMarkerDragStart | func |()=>{} |拖拽marker开始回调| | onMarkerDrag | func |()=>{} |拖拽marker中回调| | onMarkerDragEnd | func |()=>{} |拖拽marker结束回调|

MapView 方法

|Methed| Description |Result | |--|--|--| | setCenter({latitude, longitude}) | 设置地图中心点位置 | | setZoom(number) | 设置地图缩放 | | setZoomToSpanMarkers( [{latitude, longitude}]) | 地图中所有的marker点显示在视图内 |

Marker属性

|Prop|Type |Default|Description| |--|--|--|--| | title | string |”“ |infowindow内容| | location | object |{latitude, longitude}|坐标| | icon | any ||Marker图片,支持本地与远程| | draggable | bool |false|是否可拖拽| | active | bool |false|是否显示infowind| | infoWindowYOffset | number |0|infowind y轴偏移,正数向下移动,负数向上移动| | scale | number |1|icon缩放大小, 仅android| | perspective | bool |false|是否开启近大远小效果, 仅android| | alpha | number |0|透明度, 仅android| | rotate | number |0|旋转角度, 仅android| | flat | bool |false|是否平贴地图, 仅android| | infoWindowMinHeight | number |100|infoWindow 最小高度, 仅android| | infoWindowMinWidth | number |200|infoWindow 最小宽度, 仅android| | infoWindowTextSize | number |16|infoWindow 字体, 仅android|

Polyline属性

|Prop|Type |Default|Description| |--|--|--|--| | points | LatLang[] |[] |折线坐标点列表,[{latitude, longitude}]| | color | string |#000000 |线条颜色,需要完整的rrggbb类型, 如:#000000| | width | number |6 |线条宽度|

Arc属性

|Prop|Type |Default|Description| |--|--|--|--| | points | LatLang[] |[] |弧线坐标点列表,[{latitude, longitude}]| | color | string |#000000 |线条颜色,需要完整的rrggbb类型, 如:#000000| | width | number |4 |线条宽度|

Circle属性

|Prop|Type |Default|Description| |--|--|--|--| | circleCenter | LatLang | |圆形中点| | color | string |#000000 |边框颜色,需要完整的rrggbb类型, 如:#000000| | width | number |4 |边框宽度| | radius | number |1400 |圆形半径| | fillColor | string |#F6000F |圆形背景颜色,android可使用十六进制控制透明度, ios使用fillColorAlpha属性| | fillColorAlpha | number |0.5 |圆形背景颜色透明度,仅ios|

Polygon属性

|Prop|Type |Default|Description| |--|--|--|--| | points | LatLang[] | |多边形坐标点列表| | color | string |#000000 |边框颜色,需要完整的rrggbb类型, 如:#000000| | width | number |4 |边框宽度| | fillColor | string |#F6000F |圆形背景颜色,android可使用十六进制控制透明度, ios使用fillColorAlpha属性| | fillColorAlpha | number |0.5 |圆形背景颜色透明度,仅ios|

Geolocation Methods

定位方法

|Method|Description |Result| |--|--|--| | initSDK(key) | ios使用定位前需要调用该方法 | | | start ()|开始持续定位 | | | stop() |停止持续定位 | | | addListener(func)|定位成功监听 | geolocation result|

地理编码

|Method|Description |Result| |--|--|--| | geocode(address, city) :Promise| 地理编码方法 | |

逆地理编码

|Method|Description |Result| |--|--|--| | reverseGeoCode(lat, lng) :Promise | 逆地理编码方法 | |

Search Methods

POI检索

|Method|Description |Result| |--|--|--| | searchInCity(city, keyword, pageNum): Promise | POI城市内检索(关键字检索) | search result| | searchNearby({latitude, longitude, keyword, pageNum, radius}): Promise |周边检索 | geolocation result|

地点检索

|Method|Description |Result| |--|--|--| | requestSuggestion(city, keyword): Promise | 输入提示检索 | search result|

RoutePlan Methods

|Method|Description |Result| |--|--|--| | walkingRouteSearch({startCity: 起点城市, startAddres: 起点位置, endCity: 终点城市, endAddres: 终点位置, city: 起点与终点是同一个城市, city, startCity, endCity同时使用,起点与终点都使用city}): Promise | 步行路线规划 | Route result| | drivingRouteSearch({startCity: 起点城市, startAddres: 起点位置, endCity: 终点城市, endAddres: 终点位置, city: 起点与终点是同一个城市, city, startCity, endCity同时使用,起点与终点都使用city, trafficPolicyType: 是否开起路况, drivingPolicyType: 驾车策略}): Promise | 驾车路线规划 | Route result| | bikingRouteSearch({startCity: 起点城市, startAddres: 起点位置, endCity: 终点城市, endAddres: 终点位置, city: 起点与终点是同一个城市, city, startCity, endCity同时使用,起点与终点都使用city, ridingType: 骑行类型(0:普通骑行模式,1:电动车模式)}): Promise | 骑行路线规划 | Route result| | transitRoutePlan({startCity: 起点城市, startAddres: 起点位置, endCity: 终点城市, endAddres: 终点位置, city: 起点与终点是同一个城市, city, startCity, endCity同时使用,起点与终点都使用city, policyType: 换乘策略}): Promise | 市内公交路线规划 | Route result|

OfflineMap Methods

|Method|Description |Result| |--|--|--| | start(cityId) |开始下载离线地图 | | | stop(cityId) |暂停下载离线地图 | | | remove(cityId) |删除已下载的离线地图 | | | update(cityId) |更新已下载的离线地图 | | | getHotCityList():Promise |获取热门城市 | {code,list:[]}| | searchCity():Promise |搜索城市 |{code,list:[]} | | getOfflineAllCityList() :Promise |获取所有支持离线地图的城市 |{code,list:[]} | | getDownloadedCityList() :Promise |获取已下载过的离线地图 |{code,list:[]} |

具体API用法可以参考example。