乐趣区

reactnativebaidumap使用及注意问题

jiezi

使用组件：

react-native-baidu-map

获取百度地图 API_KEY

地址：http://lbsyun.baidu.com，在控制台成功创建应用后，就可以看到应用的 api key 了

安装 

yarn add react-native-baidu-map

原生部分

Android 配置 

react-native link react-native-baidu-map
配置 AndroidManifest.xml 文件

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

<application>  
    <meta-data  
        android:name="com.baidu.lbsapi.API_KEY"  
        android:value="开发者 key" />  
</application>

2. 在 <application/> 外部添加如下权限声明：

// 获取设备网络状态，禁用后无法获取网络状态
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
// 网络权限，当禁用后，无法进行检索等相关业务
<uses-permission android:name="android.permission.INTERNET" />
// 读取设备硬件信息，统计数据
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
// 读取系统信息，包含系统版本等信息，用作统计
<uses-permission android:name="com.android.launcher.permission.READ_SETTINGS" />
// 获取设备的网络状态，鉴权所需网络代理
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
// 允许 sd 卡写权限，需写入地图数据，禁用后无法显示地图
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
// 这个权限用于进行网络定位
<uses-permission android:name="android.permission.WRITE_SETTINGS" />
// 这个权限用于访问 GPS 定位
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
// 获取统计数据
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
// 使用步行 AR 导航，配置 Camera 权限
<uses-permission android:name="android.permission.CAMERA" />
// 程序在手机屏幕关闭后后台进程仍然运行
<uses-permission android:name="android.permission.WAKE_LOCK" />

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 <react-native-baidu-map/BaiduMapViewManager.h>
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    ...
    // 地图 ak 注册
    [BaiduMapViewManager initSDK:@""];
    ...
}

使用 

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

<MapView
         width={deviceWidth}
         height={200}
         zoom={18}
         trafficEnabled={true}
         zoomControlsVisible={true}
         mapType={MapTypes.SATELLITE}
         center={{longitude: 116.465175, latitude: 39.938522}}
>
        <Marker
            title='中心'
            location={{longitude: 116.465175, latitude: 39.938522}}
          />
</MapView>

效果，上图

我的网站：https://wayne214.github.io

退出移动版