react-native-baidu-map( react-anitive 地图 )

今天把地图整理一下，希望可以让大家派上用上。

install 安装

npm install react-native-baidu-map --save

去官方申请key

百度地图sdk有教程链接

ios 配置

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

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

• Project navigator->Build Settings->Search Paths

  • TARGETS-Build Setting - Framework Search Paths 里面添加

      $(SRCROOT)/../node_modules/react-native-baidu-map/ios/lib
    

  • TARGETS-Build Setting - Header Search Paths 里面添加

      $(SRCROOT)/../node_modules/react-native-baidu-map/ios/lib
      $(SRCROOT)/../node_modules/react-native-baidu-map/ios/RCTBaiduMap 
    

  • TARGETS-Build Setting - Library Search Paths 里面添加

      $(SRCROOT)/../node_modules/react-native-baidu-map/ios/lib     
    

• Project navigator->Build Phases->Link Binary With Libraries 加入 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）

添加依赖, react-native-baidu-map/ios/lib 下的全部 framwordk:

image

ios项目根目录中添加 node_modules/react-native-baidu-map/ios/lib/BaiduMapAPI_Map.framework/Resources/mapapi.bundle 文件

image

image

image.png

• AppDelegate.m init 初始化

    #import "RCTBaiduMapViewManager.h"
    - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
    {
        ...
        [RCTBaiduMapViewManager initSDK:@"api key"];
        ...
    }
  

• ios处理报错
  (1)

  • RCTBaiduMapView.h 报错 'RCTViewManager.h' file not found

  • RCTBaiduMapView.h 报错 'RCTConvert+CoreLocation.h' file not found

      //#import "RCTViewManager.h"
      #import 
      //#import "RCTConvert+CoreLocation.h"
      #import 
    
    

(2)

image.png

#import "RCTBridgeModule.h"  注释即可

android 配置

• settings.gradle 加入

    include ':react-native-baidu-map'
    project(':react-native-baidu-map').projectDir = new File(settingsDir, '../node_modules/react-native-baidu-map/android')
  

• android/app/build.gradle dependencies中加入

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

• android/app/src/main/java/../MainApplication 中加入

    import org.lovebing.reactnative.baidumap.BaiduMapPackage;//这一句
  
    [@Override](https://my.oschina.net/u/1162528)
        protected List getPackages() {
          return Arrays.asList(
              new MainReactPackage(),
              new BaiduMapPackage(getApplicationContext()) //这一句
              ...
          );
        }     
  

• android/app/src/main/AndroidMainifest.xml 文件加入

  • application 标签中加入

  • 在manifest标签级下面加入

• 安卓错误处理

  • ***/KJChildDemo/node_modules/react-native-baidu-map/android/src/main/java/org/lovebing/reactnative/baidumap/BaiduMapPackage.java错误: 方法不会覆盖或实现超类型的方法

    @Override注释掉 貌似0.47后没有这个方法了

  • **/android/app/src/main/java/com/kjchilddemo/MainApplication.java Error:错误: 找不到符号 符号: 类 BaiduMapPackage

    在这个文件头部加入import org.lovebing.reactnative.baidumap.BaiduMapPackage;

react-native-baidu-map 使用

MapView Props

• zoomControlsVisible 缩放控件是否可见 ture（Android only）
• trafficEnabled 交通图 false
• baiduHeatMapEnabled 百度地图热力图 false
• mapType 地图类型 1--一般性的二维地图 2--卫星地图
• zoom 放大缩小
• center 地图位置
• marker 标记
• markers 多个标记
• onMapStatusChangeStart Android
• onMapStatusChange 地图放大，移动等变化时回调
• onMapStatusChangeFinish Android
• onMapLoaded 地图加载时调用函数
• onMapClick 点击地图时调用函数,回调经纬度
• onMapDoubleClick 双击地图时调用，回调经纬度
• onMarkerClick 点击标记时回调
• onMapPoiClick 点击（标点，位置）回调，

eolocation Methods

  import {Geolocation} from 'react-native-baidu-map';

• reverseGeoCode 反向地理编码

    Geolocation.reverseGeoCode(lat,lng)
                  .then(data => {
                    console.log('reverseGeoCode',data);
                  })
                  .catch(e =>{
                    console.warn(e, 'error');
                  }) 
  
    /***********回调结果************/
     { address: '上海市浦东新区金海路22号',
      city: '上海市',
      district: '浦东新区',
      longitude: '121.609842',
      province: '上海市',
      cityCode: '289',
      streetName: '金海路',
      latitude: '31.262580',
      streetNumber: '22号' }   
  

• reverseGeoCodeGPS 反向地理编码GPS

    Geolocation.reverseGeoCodeGPS(lat,lng)
          .then(data => {
            console.log('reverseGeoCodeGPS',data);
          })
          .catch(e =>{
            console.warn(e, 'error');
          })
  
    /***********回调结果************/
     { address: '上海市浦东新区东陆公路',
      city: '上海市',
      district: '浦东新区',
      longitude: 121.62064,
      province: '上海市',
      cityCode: '289',
      streetName: '东陆公路',
      latitude: 31.26606,
      streetNumber: '' }  
  

• geocode 地理编码（经纬度）

    Geolocation.geocode('上海市','杨高中路')
          .then(data => {
            console.log('geocode',data);
          })
          .catch(e =>{
            console.warn(e, 'error');
          })
  
    /***********回调结果************/
     { longitude: '121.569186', latitude: '31.240405' }             
  
  

• getCurrentPosition 获取当前位置

    Geolocation.getCurrentPosition()
          .then(data => {
            console.log('getCurrentPosition',data);
          })
          .catch(e =>{
            console.warn(e, 'error');
          })
  
    /***********回调结果************/
     { address: '上海市浦东新区杨高中路31弄-55-临',
      city: '上海市',
      district: '浦东新区',
      longitude: 121.608108,
      province: '上海市',
      cityCode: '289',
      streetName: '杨高中路',
      latitude: 31.260488,
      streetNumber: '31弄-55-临' }      
  

  • ios

    {"latitude": 0.0, "longitude": 0.0, "address": "", "province": "", "cityCode": "", "city": "", "district": "", "streetName": "", "streetNumber": ""}

  • Android

    {"latitude": 0.0, "longitude": 0.0, "direction": -1, "altitude": 0.0, "radius": 0.0, "address": "", "countryCode": "", "country": "", "province": "", "cityCode": "", "city": "", "district": "", "street": "", "streetNumber": "", "buildingId": "", "buildingName": ""}

亲测没有问题，觉得有用的小伙伴点个小红心和关注就行，么么哒。

友情提示：在开发中有遇到RN相关的技术问题，欢迎小伙伴加入交流群（620792950），在群里提问、互相交流学习。交流群也定期更新最新的RN学习资料给大家，谢谢大家支持！