react native webview 百度地图_react-native-baidu-map使用及注意问题

使用组件：

# **[react-native-baidu-map](lovebing/react-native-baidu-map)**

## 获取百度地图API_KEY

地址：百度地图开放平台 | 百度地图API SDK | 地图开发，在控制台成功创建应用后，就可以看到应用的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>

```

## 效果，上图


我的网站：Code change the World