react-native 使用百度地图
声明：本文使用的是作者未更新之前的低版本，不是最新的版本（看仔细在配置）
低版本号为："react-native-baidu-map": "^0.6.0" ，前往1.0.6版
在 Xcode 9.4上运行，10.1运行编译有问题
GitHub：https://github.com/lovebing/react-native-baidu-map
先到百度地图创建应用：
申请开发版SHA1：
打开终端，输入命令：cd .android，回车继续输入以下命令
keytool -list -v -keystore debug.keystore
口令默认为 android
得到开发版 SHA1
发布版 SHA1：以 Android Stutio 为例(Keytool生成看最下面)：
打开 build => Generate Signed APK
选择新建：
一路 next 最后 finish，在项目 android/app 下生成一个 .keystore 文件
继续在命令行中输入
keytool -list -v -keystore apk的keystore(文件路径)
接下来输入刚才的密码：
得到发布版 SHA1:
Keytool -genkey -alias my-release-keystore.keystore -keyalg RSA -validity 20000 -keystore my-release-keystore.keystore
keytool工具是Java JDK自带的证书工具
-genkey参数表示：要生成一个证书（版权、身份识别的安全证书）
-alias参数表示：证书有别名，-alias fantongyo.keystore表示证书别名为:my-release-keystore
-keyalg RSA表示加密类型，RSA表示需要加密，以防止别人盗取
-validity 20000表示有效时间20000天
-keystore my-release-keystore.keystore表示要生成的证书名称为my-release-keystore
--------------------------------------------------------------------------------------------
输入命令：Keytool -genkey -alias my-release-keystore.keystore -keyalg RSA -validity 20000 -keystore my-release-keystore.keystore，到最后提示keytool 错误: java.io.FileNotFoundException: MyAndroidKey.keystore (Permission denied).
原因：缺少权限
方法一更改保存目录：就是讲jdk从c盘挪到其它盘。
方法二更改权限：以管理员身份运行CMD，MAC 下添加 sudo
sudo Keytool -genkey -alias my-release-keystore.keystore -keyalg RSA -validity 20000 -keystore my-release-keystore.keystore
安装 npm i react-native-baidu-map --save
android配置：
在项目的 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 中添加
signingConfigs {
release {
storeFile file(MYAPP_RELEASE_STORE_FILE)
storePassword MYAPP_RELEASE_STORE_PASSWORD
keyAlias MYAPP_RELEASE_KEY_ALIAS
keyPassword MYAPP_RELEASE_KEY_PASSWORD
}
}
buildTypes {
release {
...
signingConfig signingConfigs.release
}
}
dependencies {
implementation project(':react-native-baidu-map') // 添加的一行
...
} 在gradle.properties中添加
MYAPP_RELEASE_STORE_FILE=my-release-keystore.keystore
MYAPP_RELEASE_KEY_ALIAS=my-release-keystore.keystore (和自己之前起的文件名要一致)
MYAPP_RELEASE_STORE_PASSWORD=****** （自己设置的密码）
MYAPP_RELEASE_KEY_PASSWORD=******在android/app/src/main/AndroidManifest.xml 中添加
MainApplication.java 中添加：
import org.lovebing.reactnative.baidumap.BaiduMapPackage; //添加
protected List getPackages() {
return Arrays.asList(
new MainReactPackage(),
new BaiduMapPackage(getApplicationContext()) //add this
);
} 在node_modules/react-native-baidu-map中修改 MapView.js
修改前：
import React, {
Component,
PropTypes
} from 'react';
修改后：
import React, {
Component,
} from 'react';
import PropTypes from 'prop-types'在node_modules/react-native-baidu-map/android 下修改 BaiduMapPackage.java
删除或注释第 49 行的：@Override
ios 配置：
1、Project navigator->Libraries->Add Files to 选择 react-native-baidu-map/ios/RCTBaiduMap.xcodeproj
2、Project navigator->Build Phases->Link Binary With Libraries 加入 libRCTBaiduMap.a
继续添加依赖，点击 Add Other：
3、Project navigator->Build Settings->Search Paths，
Framework search paths 添加 $(SRCROOT)/../node_modules/react-native-baidu-map/ios/lib，
Header search paths 添加 $(SRCROOT)/../node_modules/react-native-baidu-map/ios/RCTBaiduMap
（也可以在node_modules文件下将对应文件直接拖进去，感谢@_摩西_的提醒）
4、添加依赖, react-native-baidu-map/ios/lib 下的全部 framwordk， 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）
添加方法同第二步，
5、添加 BaiduMapAPI_Map.framework/Resources/mapapi.bundle
将node_modules/react-native-baidu-map/ios/lib/BaiduMapAPI_Map.framework/Resources/mapapi.bundle拖进xcode与项目同名的文件夹下
6、AppDelegate.m init 初始化
#import "RCTBaiduMapViewManager.h"
//百度地图
[RCTBaiduMapViewManager initSDK:@"api key"];
1、error: Redefinition of ‘RCTMethodInfo’ :
2、error: 'RCTViewManager.h' file not found
js代码：
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
ScrollView,
Platform,
} from 'react-native';
import { MapView,MapTypes,Geolocation} from 'react-native-baidu-map';
import Dimensions from 'Dimensions';
const { width,height } = Dimensions.get('window');
export default class BaiduMapDemo extends Component {
constructor() {
super();
this.state = {
zoomControlsVisible: true,
trafficEnabled: false,
baiduHeatMapEnabled: false,
mapType: MapTypes.NORMAL,
zoom: 15,
center: {
longitude: 113.896198,
latitude: 22.959144,
},
markers: [
{
longitude: 113.896198,
latitude: 22.959144,
title: 'title',
}
],
clickMessage: '',
poiMessage: '',
};
}
componentDidMount() {
}
render() {
return (
{ //地图加载事件
Geolocation.getCurrentPosition()
.then(data => {
console.log(data)
// this.setState({
// center: {
// longitude: data.longitude,
// latitude: data.latitude
// },
// markers: [{
// longitude: data.longitude,
// latitude: data.latitude,
// title: data.district + data.street
// }]
// })
})
.catch(e =>{
console.warn(e, 'error');
})
}}
onMarkerClick={(e) => { //标记点点击事件
console.log(e)
}}
onMapClick={(e) => { //地图空白区域点击事件,返回经纬度
let title = '';
Geolocation.reverseGeoCode(e.latitude,e.longitude)
.then(res => {
console.log(res)
Platform.OS == 'ios' ?
title = res.district + res.streetName
:
title = res.district + res.street;
this.setState({
center: {
longitude: e.longitude,
latitude: e.latitude,
},
markers: [{
longitude: e.longitude,
latitude: e.latitude,
title: title,
}],
clickMessage: JSON.stringify(res)
})
})
.catch(err => {
console.log(err)
})
}}
onMapPoiClick={(e) => { //地图已有点点击
Geolocation.reverseGeoCode(e.latitude,e.longitude)
.then(res => {
res = JSON.stringify(res)
this.setState({
center: {
longitude: e.longitude,
latitude: e.latitude,
},
markers: [{
longitude: e.longitude,
latitude: e.latitude,
title: e.name,
}],
poiMessage: res
})
})
.catch(err => {
console.log(err)
})
}}
style={styles.map}
>
地图缩放控件状态:
{this.state.zoomControlsVisible ?
this.setState({zoomControlsVisible:false})}>显示
:
this.setState({zoomControlsVisible:true})}>关闭
}
交通线状态:
{this.state.trafficEnabled ?
this.setState({trafficEnabled:false})}>显示
:
this.setState({trafficEnabled:true})}>关闭
}
热力图状态:
{this.state.baiduHeatMapEnabled ?
this.setState({baiduHeatMapEnabled:false})}>显示
:
this.setState({baiduHeatMapEnabled:true})}>关闭
}
地图模式状态:
{this.state.mapType == MapTypes.NORMAL ?
this.setState({mapType:MapTypes.SATELLITE})}>普通
:
this.setState({mapType:MapTypes.NORMAL})}>卫星
}
地图空白区域点击信息:
{this.state.clickMessage}
地图已有点点击信息:
{this.state.poiMessage}
{
Geolocation.getCurrentPosition()
.then(data => {
console.log(data)
this.setState({
center: {
longitude: data.longitude,
latitude: data.latitude
},
markers: [{
longitude: data.longitude,
latitude: data.latitude,
title: data.district + data.street
}]
})
})
.catch(e =>{
console.warn(e, 'error');
})
}}>当前位置
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
map: {
width: width,
height: height - 300,
marginBottom: 5,
},
list: {
flexDirection: 'row',
paddingLeft: 10,
marginBottom: 5,
}
});
ios效果图：
android效果图：
