react native 百度地图

最新推荐文章于 2024-04-11 09:57:54 发布

weixin_33933118

最新推荐文章于 2024-04-11 09:57:54 发布

阅读量190

点赞数

文章标签：移动开发 java xcode

原文链接：https://my.oschina.net/KJhulinhua/blog/1539317

版权

2019独角兽企业重金招聘Python工程师标准>>>

react-native-baidu-map

react-native-baidu-map 配置

本教程配有demo，如果觉得对你有用，请给予关注、收藏喔

demo 地址

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）
在项目级的Frameworks文件夹中添加依赖（Add Files to ）, node_modules/react-native-baidu-map/ios/lib 下的全部 framwordk
- TARGETS-Build Setting - Header Search Paths 里面添加$(inherited)
- 如添加的BaiduMapAPI_*.framework不是放在Frameworks文件夹中，可不添加$(inherited)
ios项目根目录中添加 node_modules/react-native-baidu-map/ios/lib/BaiduMapAPI_Map.framework/Resources/mapapi.bundle 文件

AppDelegate.m init 初始化

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

处理报错

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

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

  //#import "RCTViewManager.h"
  #import <React/RCTViewManager.h>
  //#import "RCTConvert+CoreLocation.h"
  #import <React/RCTConvert+CoreLocation.h>

Error: Redefinition of RCTMethodInfo

  在BaseModule.h下
  把import "RCTBridgeModule.h" —> #import <React/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 中加入

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

android/app/src/main/java/../MainApplication 中加入new BaiduMapPackage(getApplicationContext())

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

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

application 标签中加入

  <meta-data android:name="com.baidu.lbsapi.API_KEY" android:value="bF65Gy5KVAaFNS瞎写的xQkssgvR2dV"/>

在manifest标签级下面加入

  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
  <uses-permission android:name="com.android.launcher.permission.READ_SETTINGS" />
  <uses-permission android:name="android.permission.WAKE_LOCK"/>
  <uses-permission android:name="android.permission.CHANGE_WIFI_STATE" />
  <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
  <uses-permission android:name="android.permission.GET_TASKS" />
  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
  <uses-permission android:name="android.permission.WRITE_SETTINGS" />

错误处理
- ***/KJChildDemo/node_modules/react-native-baidu-map/android/src/main/java/org/lovebing/reactnative/baidumap/BaiduMapPackage.javaError:(49, 5) 错误: 方法不会覆盖或实现超类型的方法
@Override注释掉貌似0.47后没有这个方法了
- **/android/app/src/main/java/com/kjchilddemo/MainApplication.java Error:(31, 15) 错误: 找不到符号符号: 类 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

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": ""}

转载于:https://my.oschina.net/KJhulinhua/blog/1539317