react native android百度地图定位

使用百度地图进行定位，我选择的插件是：react-native-baidu-map
github地址：https://github.com/lovebing/react-native-baidu-map
样例：

图片.png

此处我只写了配置Android的教程，需要ios配置的可以移步至：http://www.jianshu.com/p/eceb7e66fa5e ，作者写的很详细。

配置步骤：
1、导入

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

2、link

react-native link react-native-baidu-map

3、配置
有时候link可能没起作用，或者link只自动配置了一半而没有配全，所以我们需要手动去检查一些是否都配置全了，去过没有配置全，还需手动去配置。
setting.gradle

include ':react-native-baidu-map' project(':react-native-baidu-map').projectDir = new File(settingsDir, '../node_modules/react-native-baidu-map/android’)

setting.gradle.png

App/build.gradle

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

build.gradle .png

MainApplication

new BaiduMapPackage(getApplicationContext())

图片.png

除此之外，别忘了将包导进来：不过一般都会自动导进来。
MainApplication

import org.lovebing.reactnative.baidumap.BaiduMapPackage;

图片.png

AndroidMainifest.xml
开启权限：

<!-- 访问GPS定位 -->
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<!-- 网络定位-->
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<!-- 用于访问wifi网络信息，wifi信息会用于进行网络定位-->
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
<uses-permission android:name="android.permission.READ_PHONE_STATE” />

配置百度地图AK：

<meta-data
    android:name="com.baidu.lbsapi.API_KEY"
    android:value=“你所申请的百度地图AK”/>

图片.png
申请百度地图AK可参考：http://www.jianshu.com/p/2e2c562a2275

现在所有的配置都已经完成了，我们就可以进行百度地图定位了。

BaiduMap.js

import React, {
    Component,
    PropTypes
} from 'react';

import {
    MapView, 
    MapTypes, 
    Geolocation 
} from 'react-native-baidu-map';

import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableHighlight
} from 'react-native';

import styles from './styles';

export default class BaiduMap extends Component {

    constructor() {
        super();

        this.state = {
            mayType: MapTypes.NORMAL,
            zoom: 15, 
            trafficEnabled: false,
            baiduHeatMapEnabled: false,
        };
    }

    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')
        })
    }

    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}
                    onMapClick={(e) => {
                    }}
                >
                </MapView>

            </View>
        );
    }
}

styles.js

'use strict';

import { StyleSheet } from "react-native";

module.exports = StyleSheet.create({

    container: {
        flex: 1,
        height:400,
        flexDirection:'row',
        justifyContent: 'flex-start',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    map: {
        flex:1,
        height:400,
    }

});