附地址：https://github.com/lovebing/react-native-baidu-map

1、申請(qǐng)秘鑰

地址：http://lbsyun.baidu.com/apiconsole/key

創(chuàng)建應(yīng)用.png

發(fā)布版SHA1，找到my-release-key.keystore文件目錄

keytool -list -v -keystore my-release-key.keystore

附簽署應(yīng)用： 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 (權(quán)限這里一定注意，否則地圖只會(huì)顯示網(wǎng)格)

    <uses-permission android:name="android.permission.INTERNET"/>
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
    <!-- 獲取網(wǎng)絡(luò)狀態(tài) -->
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
    <!-- 這個(gè)權(quán)限用于訪問(wèn)GPS定位-->
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
    <!-- 用于訪問(wèn)wifi網(wǎng)絡(luò)信息，wifi信息會(huì)用于進(jìn)行網(wǎng)絡(luò)定位-->
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>

    <!-- 放在application下面-->
    <meta-data android:name="com.baidu.lbsapi.API_KEY" android:value="剛申請(qǐng)的秘鑰"/> 

3、構(gòu)建

引入

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>

可能遇到的問(wèn)題：

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';

// 錯(cuò)誤：方法不會(huì)覆蓋或?qū)崿F(xiàn)超類(lèi)型的方法

// 解決辦法：node_modules\react-native-baidu-map/android../BaiduMapPackage.java中createJSModules方法的@Override干掉

真機(jī)、模擬器可能只顯示網(wǎng)格，打包應(yīng)該是就可以了的

顯示結(jié)果.png