React-Native-Android使用百度地图

百度地图key值

• http://developer.baidu.com/，注册开发者帐号
• 进入百度地图->API控制台，创建应用，应用类型选择Android SDK，输入发布版SHA1和包名提交即可

显示地图及定位

使用react-native-baidu-map依赖。

• NPM install

  npm install react-native-baidu-map --save

• android/setting.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:

  compile project(':react-native-baidu-map')

• MainApplication.java:

  import org.lovebing.reactnative.baidumap.BaiduMapPackage;
  
        return Arrays.<ReactPackage>asList(
            ...
            , new BaiduMapPackage(getApplicationContext())
            ...

• AndroidManifest.xml:

  <!--用于进行网络定位-->
  <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"></uses-permission>
  <!--用于访问GPS定位-->
  <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"></uses-permission>
  <!--获取运营商信息，用于支持提供运营商信息相关的接口-->
  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"></uses-permission>
  <!--用于访问wifi网络信息，wifi信息会用于进行网络定位-->
  <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"></uses-permission>
  <!--这个权限用于获取wifi的获取权限，wifi信息会用来进行网络定位-->
  <uses-permission android:name="android.permission.CHANGE_WIFI_STATE"></uses-permission>
  <!--用于访问网络，网络定位需要上网-->
  <uses-permission android:name="android.permission.INTERNET"></uses-permission>
  <!--用于读取手机当前的状态-->
  <uses-permission android:name="android.permission.READ_PHONE_STATE"></uses-permission>
  <!--写入扩展存储，向扩展卡写入数据，用于写入缓存定位数据-->
  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"></uses-permission>
  
  <application
    android:name=".MainApplication"
    android:allowBackup="true"
    android:label="@string/app_name"
    android:icon="@mipmap/ic_launcher"
    android:theme="@style/AppTheme">
    <service android:name="com.amap.api.location.APSService"></service>
    <meta-data
      android:name="com.baidu.lbsapi.API_KEY"
      android:value="baidu-key"/><!--百度地图key值-->
     ...

• Usage

  import React, { Component } from 'react';
  import {
    View,
    Text,
    TouchableHighlight,
    StyleSheet,
    InteractionManager,
    Dimensions,
    Platform,
    StatusBar,
    NativeAppEventEmitter,
    Alert,
  } from 'react-native';
  import { Button } from 'antd-mobile';
  import { MapView, MapTypes, MapModule, Geolocation } from 'react-native-baidu-map';
  
  class BaiduLocationTest extends Component {
    constructor(props) {
      super(props);
      this.state = {
        mayType: MapTypes.NORMAL,
        zoom: 15,
        center: {
          longitude: 113.981718,
          latitude: 22.542449
        },
        trafficEnabled: false,
        baiduHeatMapEnabled: false,
        markers: [{
          longitude: 113.981718,
          latitude: 22.542449,
          title: "Window of the world"
        },{
          longitude: 113.995516,
          latitude: 22.537642,
          title: ""
        }]
      };
      this.timer = null;
    }
    componentDidMount() {
  
    }
    componentWillUnmount () {
      this.timer && clearInterval(this.timer);
    }
    getLocation = () => {
      this.timer = setInterval(
        () => {
          Geolocation.getCurrentPosition()
            .then(data => {
              console.log(JSON.stringify(data));
              this.setState({
                marker: {
                  latitude: data.latitude,
                  longitude: data.longitude,
                  title: 'Your location'
                },
                center: {
                  latitude: data.latitude,
                  longitude: data.longitude,
                  rand: Math.random()
                }
              });
            })
            .catch(e =>{
              console.warn(e, 'error');
            })
        },
        2000
      );
    }
    render() {
      return (
        <View style={styles.container}>
          <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={styles.map}
            onMarkerClick={(e) => {
              console.warn(JSON.stringify(e));
            }}
            onMapClick={(e) => {
            }}
          >
          </MapView>
          <View style={styles.row}>
            <Button style={styles.btn} onClick={this.getLocation}>获取位置信息</Button>
          </View>
        </View>
      );
    }
  }
  
  const styles = StyleSheet.create({
    button: {
      margin: 20,
    },
    row: {
      flexDirection: 'row',
      height: 40
    },
    container: {
      flex: 1,
      justifyContent: 'flex-start',
      alignItems: 'center',
      backgroundColor: '#F5FCFF',
    },
    map: {
      width: Dimensions.get('window').width,
      height: Dimensions.get('window').height - 200,
      marginBottom: 16
    }
  });
  
  export default BaiduLocationTest;