美文网首页
react native android百度地图定位

react native android百度地图定位

作者: 走走婷婷1215 | 来源:发表于2017-03-13 17:26 被阅读6216次

    使用百度地图进行定位,我选择的插件是: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,
        }
    
    });
    

    相关文章

      网友评论

          本文标题:react native android百度地图定位

          本文链接:https://www.haomeiwen.com/subject/ylkqnttx.html