附地址：https://github.com/lovebing/react-native-baidu-map
1、申请秘钥
地址：http://lbsyun.baidu.com/apiconsole/key
创建应用.png
应用名称：随意
发布版SHA1，找到my-release-key.keystore文件目录
keytool -list -v -keystore my-release-key.keystore
附签署应用： https://reactnative.cn/docs/0.51/signed-apk-android.html#content
包名：
image.png
2、安装
npm install react-native-baidu-map --save
react-native link react-native-baidu-map
检查link
android/app/build.gradle
compile project(':react-native-baidu-map')
android/settings.gradle
include ':react-native-baidu-map'
project(':react-native-baidu-map').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-baidu-map/android')
MainApplication.java
import org.lovebing.reactnative.baidumap.BaiduMapPackage;
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new BaiduMapPackage(getApplicationContext())
);
}
AndroidManifest.xml (权限这里一定注意，否则地图只会显示网格)
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<!-- 获取网络状态 -->
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
<!-- 这个权限用于访问GPS定位-->
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<!-- 用于访问wifi网络信息，wifi信息会用于进行网络定位-->
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
<!-- 放在application下面-->
<meta-data android:name="com.baidu.lbsapi.API_KEY" android:value="刚申请的秘钥"/>
3、构建
引入
import {
MapView,
MapTypes,
Geolocation
} from 'react-native-baidu-map';
state = {
mayType: MapTypes.NORMAL,
zoom: 15,
center: {
longitude: 113.981718,
latitude: 22.542449
},
trafficEnabled: false,
baiduHeatMapEnabled: false,
markers: []
};
componentDidMount() { // 获取位置
Geolocation.getCurrentPosition().then(
(data) => {
this.setState({
zoom: 18,
markers: [{
latitude: data.latitude,
longitude: data.longitude,
title: '我的位置'
}],
center: {
latitude: data.latitude,
longitude: data.longitude
}
})
}
).catch(error => {
console.warn(error, 'error')
})
}
<MapView trafficEnabled={this.state.trafficEnabled} baiduHeatMapEnabled={this.state.baiduHeatMapEnabled} zoom={this.state.zoom} mapType={this.state.mapType} center={this.state.center marker={this.state.marker} markers={this.state.markers} style={{height:400}}
onMarkerClick={(e) => {
console.warn(JSON.stringify(e));
}}
onMapClick={(e) => {
}}>
</MapView>
可能遇到的问题：
Cannot read property 'bool' of undefined
// 解决办法
//修改node_modules\react-native-baidu-map/js/MapView.js
import React, { Component } from 'react';
import PropTypes from 'prop-types';
// 错误：方法不会覆盖或实现超类型的方法
// 解决办法：node_modules\react-native-baidu-map/android../BaiduMapPackage.java中createJSModules方法的@Override干掉
真机、模拟器可能只显示网格，打包应该是就可以了的
显示结果.png
