rns

react-native-s-baidumap-wu

百度地图 React Native ,同时支持ios和android

Showing:

Popularity

Downloads/wk

0

GitHub Stars

24

Maintenance

Last Commit

1yr ago

Contributors

1

Package

Dependencies

0

License

ISC

Type Definitions

Built-In

Tree-Shakeable

No?

Categories

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配置

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

PropTypeDefaultDescription
zoomControlsVisibleboolfalse显示放大缩小按钮
isTrafficEnabledboolfalse显示交通路线
isBaiduHeatMapEnabledboolfalse显示百度热力图层
baiduMapTypenumber1地图类型 1: 标准地图 2: 卫星地图 3:空白地图
locationEnabledboolfalse显示当前定位位置
myLocationDataobject{}显示当前定位数据, 使用该属性前locationEnabled必须设置为true
zoomnumber18地图缩放级别[4,21]
zoomMinLevelnumber4地图最小缩放级别,最小4
zoomMaxLevelnumber21地图最大缩放级别,最大21
centerLatLngobject{}地图中心点位置{latitude: ..., longitude: ...}
zoomGesturesEnabledbooltrue是否允许缩放手势
scrollGesturesEnabledbooltrue是否允许拖拽手势
overlookingGesturesEnabledbooltrue是否允许俯视手势
rotateGesturesEnabledbooltrue是否允许旋转手势
mapCustomStyleFileNamestring”“用于设置个性化地图的样式文件
onMapLoadedfunc()=>{}地图加载完成回调
onMapClickfunc()=>{}点击地图回调
onMapPoiClickfunc()=>{}点击地图地点回调
onMapLongClickfunc()=>{}长按地图回调
onMapDoubleClickfunc()=>{}双击地图回调
onMapStatusChangeStartfunc()=>{}地图状态开始变化回调
onMapStatusChangefunc()=>{}地图状态变化中回调
onMapStatusChangeFinishfunc()=>{}地图状态变化结束回调
onMarkerClickfunc()=>{}点击marker回调
onMarkerDragStartfunc()=>{}拖拽marker开始回调
onMarkerDragfunc()=>{}拖拽marker中回调
onMarkerDragEndfunc()=>{}拖拽marker结束回调

MapView 方法

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

Marker属性

PropTypeDefaultDescription
titlestring”“infowindow内容
locationobject{latitude, longitude}坐标
iconanyMarker图片,支持本地与远程
draggableboolfalse是否可拖拽
activeboolfalse是否显示infowind
infoWindowYOffsetnumber0infowind y轴偏移,正数向下移动,负数向上移动
scalenumber1icon缩放大小, 仅android
perspectiveboolfalse是否开启近大远小效果, 仅android
alphanumber0透明度, 仅android
rotatenumber0旋转角度, 仅android
flatboolfalse是否平贴地图, 仅android
infoWindowMinHeightnumber100infoWindow 最小高度, 仅android
infoWindowMinWidthnumber200infoWindow 最小宽度, 仅android
infoWindowTextSizenumber16infoWindow 字体, 仅android

Polyline属性

PropTypeDefaultDescription
pointsLatLang[][]折线坐标点列表,[{latitude, longitude}]
colorstring#000000线条颜色,需要完整的rrggbb类型, 如:#000000
widthnumber6线条宽度

Arc属性

PropTypeDefaultDescription
pointsLatLang[][]弧线坐标点列表,[{latitude, longitude}]
colorstring#000000线条颜色,需要完整的rrggbb类型, 如:#000000
widthnumber4线条宽度

Circle属性

PropTypeDefaultDescription
circleCenterLatLang圆形中点
colorstring#000000边框颜色,需要完整的rrggbb类型, 如:#000000
widthnumber4边框宽度
radiusnumber1400圆形半径
fillColorstring#F6000F圆形背景颜色,android可使用十六进制控制透明度, ios使用fillColorAlpha属性
fillColorAlphanumber0.5圆形背景颜色透明度,仅ios

Polygon属性

PropTypeDefaultDescription
pointsLatLang[]多边形坐标点列表
colorstring#000000边框颜色,需要完整的rrggbb类型, 如:#000000
widthnumber4边框宽度
fillColorstring#F6000F圆形背景颜色,android可使用十六进制控制透明度, ios使用fillColorAlpha属性
fillColorAlphanumber0.5圆形背景颜色透明度,仅ios

Geolocation Methods

定位方法

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

地理编码

MethodDescriptionResult
geocode(address, city) :Promise地理编码方法

逆地理编码

MethodDescriptionResult
reverseGeoCode(lat, lng) :Promise逆地理编码方法

Search Methods

POI检索

MethodDescriptionResult
searchInCity(city, keyword, pageNum): PromisePOI城市内检索(关键字检索)search result
searchNearby({latitude, longitude, keyword, pageNum, radius}): Promise周边检索geolocation result

地点检索

MethodDescriptionResult
requestSuggestion(city, keyword): Promise输入提示检索search result

RoutePlan Methods

MethodDescriptionResult
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

MethodDescriptionResult
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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100