react-native-baidu-map使用及注意问题-白红宇

使用组件：

获取百度地图API_KEY

地址：，在控制台成功创建应用后，就可以看到应用的api key了

安装

yarn add react-native-baidu-map复制代码

原生部分

Android配置

react-native link react-native-baidu-map复制代码

配置AndroidManifest.xml文件

1.在中加入如下代码配置开发密钥（AK）


          
       
    复制代码

2.在外部添加如下权限声明：

//获取设备网络状态，禁用后无法获取网络状态
    //网络权限，当禁用后，无法进行检索等相关业务
    //读取设备硬件信息，统计数据
    //读取系统信息，包含系统版本等信息，用作统计
    //获取设备的网络状态，鉴权所需网络代理
    //允许sd卡写权限，需写入地图数据，禁用后无法显示地图
    //这个权限用于进行网络定位
    //这个权限用于访问GPS定位
    //获取统计数据
    //使用步行AR导航，配置Camera权限
    //程序在手机屏幕关闭后后台进程仍然运行
    复制代码

IOS配置

使用pod,Podfile文件中添加

pod 'React', :path => '../node_modules/react-native', :subspecs => [    'Core',    'CxxBridge',    'DevSupport',     'RCTText',    'RCTNetwork',    'RCTWebSocket',     'RCTAnimation'  ]  pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'  pod 'react-native-baidu-map', :podspec => '../node_modules/react-native-baidu-map/ios/react-native-baidu-map.podspec'复制代码

注意！！！：AppDelegate.m init 初始化，使用如下代码，可以解决RCTBaiduMapViewManager.h文件找不到的问题

#import 
    
     - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{    ...    // 地图 ak 注册    [BaiduMapViewManager initSDK:@""];    ...}复制代码

使用

导入import { MapView, MapTypes, Geolocation, Overlay } from 'react-native-baidu-map'const { Marker } = Overlay;
            
     
    复制代码

效果，上图

我的网站：