react native android百度地图定位

http://www.jianshu.com/p/7ca4d7acb6d2

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

图片.png

配置步骤：
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,    }});