react-native-baidu-map(1.0.6)

配置方面，还是先到百度地图开放平台创建应用，获取 AK（之前文档有写，前往）

• 安装

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

•  添加依赖

react-native link react-native-baidu-map

# Andorid 配置

修改 AndroidManifest 文件

 <!-- 这个权限用于进行网络定位-->
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <!-- 这个权限用于访问GPS定位-->
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
    <!-- 用于访问wifi网络信息，wifi信息会用于进行网络定位-->
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="com.android.launcher.permission.READ_SETTINGS" />
    <uses-permission android:name="android.permission.WAKE_LOCK" />
    <uses-permission android:name="android.permission.CHANGE_WIFI_STATE" />
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>


 <application
    ...

    <meta-data
        android:name="com.baidu.lbsapi.API_KEY"
        android:value="xVO2nOsdca5mnw5MUjdp1yXdXI7ebpXQ"/>
    ...
 </application>

修改app/build.gradle文件

defaultConfig {
    ...
}
compileOptions {
    sourceCompatibility JavaVersion.VERSION_1_8
    targetCompatibility JavaVersion.VERSION_1_8
}
splits {
    ...
}

 

# iOS配置

使用pod安装    工程目录下新建 Podfile 文件

Podfile:

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'educate' do
    rn_path = '../node_modules/react-native'
  
    pod 'yoga', path: "#{rn_path}/ReactCommon/yoga/yoga.podspec"
    pod 'React', path: rn_path, subspecs: [
      'Core',
      'CxxBridge',
      'DevSupport',
      'RCTActionSheet',
      'RCTAnimation',
      'RCTGeolocation',
      'RCTImage',
      'RCTLinkingIOS',
      'RCTNetwork',
      'RCTSettings',
      'RCTText',
      'RCTVibration',
      'RCTWebSocket',
    ]
  
    pod 'DoubleConversion', :podspec => "#{rn_path}/third-party-podspecs/DoubleConversion.podspec"
    pod 'glog', :podspec => "#{rn_path}/third-party-podspecs/glog.podspec"
    pod 'Folly', :podspec => "#{rn_path}/third-party-podspecs/Folly.podspec"
  
    pod 'react-native-baidu-map', :podspec => '../node_modules/react-native-baidu-map/ios/react-native-baidu-map.podspec'
    
    post_install do |installer|
      installer.pods_project.targets.each do |target|
        if target.name == "React"
          target.remove_from_project
        end
    
        if target.name == "yoga"
          target.remove_from_project
        end
      end
    end
  end

安装 pod install

AppDelegate.m init 初始化

#import "BaiduMapViewManager.h"
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    ...
    [BaiduMapViewManager initSDK:@"k7zu7zGBep9NvZ2xD9j6mb7CdoKNyVe4"];
    ...
}

 

---

 

App.js

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    ScrollView,
    Platform,
    FlatList,
} from 'react-native';
 
import { MapView, MapTypes, Geolocation, Overlay } from 'react-native-baidu-map';
const { Marker } = Overlay;
 
import Dimensions from 'Dimensions';
const { width,height } = Dimensions.get('window');
 
export default class BaiduMapDemo extends Component {
    constructor() {
        super();
        this.state = {
            zoomControlsVisible: true,
            trafficEnabled: false,
            baiduHeatMapEnabled: false,
            mapType: MapTypes.NORMAL,
            zoom: 15,
            center: {
                longitude: 113.896198,
                latitude: 22.959144,
            },
            clickMessage: '', //空白区域信息
            poiMessage: '', //已有点信息
            clickMessageData: [], //空白区域附近数据
            poiMessageData: [], //已有点附近数据
        };
    }
 
    componentDidMount() {
        Geolocation.getCurrentPosition()
            .then(data => {
                // console.log(data)
                // this.setState({
                //     center: {
                //         longitude: data.longitude,
                //         latitude: data.latitude
                //     },
                // })
            })
            .catch(e =>{
                console.warn(e, 'error');
            })
    }
 
  render() {
        return (
            <ScrollView style={styles.container}>
                <MapView 
                    zoomControlsVisible={this.state.zoomControlsVisible} //默认true,是否显示缩放控件,仅支持android
                    trafficEnabled={this.state.trafficEnabled} //默认false,是否显示交通线
                    baiduHeatMapEnabled={this.state.baiduHeatMapEnabled} //默认false,是否显示热力图
                    mapType={this.state.mapType} //地图模式,NORMAL普通 SATELLITE卫星图
                    zoom={this.state.zoom} //缩放等级,默认为10
                    center={this.state.center}
 
                    onMapLoaded={(e) => { //地图加载事件
                        console.log('地图加载')
                    }}
                    
                    onMarkerClick={(e) => { //标记点点击事件
                        console.log('标记点点击',e)
                    }}
                    onMapClick={(e) => { //地图空白区域点击事件,返回经纬度
                        
                        Geolocation.reverseGeoCode(e.latitude,e.longitude)
                            .then(res => {
                                this.setState({
                                    center: {
                                        longitude: e.longitude,
                                        latitude: e.latitude,
                                    },
                                    clickMessageData: res.poiList,
                                })
                                if(Platform.OS === 'ios') {
                                    this.setState({
                                        clickMessage: res.district + res.streetName,
                                    })
                                }else {
                                    this.setState({
                                        clickMessage: e.name,
                                    })
                                }
                            })
                            .catch(err => {
                                console.log(err)
                            })
                        
                    }}
                    onMapPoiClick={(e) => { //地图已有点点击
                        Geolocation.reverseGeoCode(e.latitude,e.longitude)
                            .then(res => {
                                this.setState({
                                    center: {
                                        longitude: e.longitude,
                                        latitude: e.latitude,
                                    },
                                    poiMessage: e.name,
                                    poiMessageData: res.poiList,
                                })
                            })
                            .catch(err => {
                                console.log(err)
                            })
                    }}
                    style={styles.map}
                >
                    <Marker
                        title={'title'}
                        location={this.state.center}
                    >
                    </Marker>
                </MapView>
 
                <View style={styles.list}>
                    <Text>地图缩放控件状态: </Text>
                    {this.state.zoomControlsVisible ? 
                        <Text onPress={() => this.setState({zoomControlsVisible:false})}>显示</Text>
                        :
                        <Text onPress={() => this.setState({zoomControlsVisible:true})}>关闭</Text>
                    }
                </View>
                <View style={styles.list}>
                    <Text>交通线状态: </Text>
                    {this.state.trafficEnabled ? 
                        <Text onPress={() => this.setState({trafficEnabled:false})}>显示</Text>
                        :
                        <Text onPress={() => this.setState({trafficEnabled:true})}>关闭</Text>
                    }
                </View>
                <View style={styles.list}>
                    <Text>热力图状态: </Text>
                    {this.state.baiduHeatMapEnabled ? 
                        <Text onPress={() => this.setState({baiduHeatMapEnabled:false})}>显示</Text>
                        :
                        <Text onPress={() => this.setState({baiduHeatMapEnabled:true})}>关闭</Text>
                    }
                </View>
                <View style={styles.list}>
                    <Text>地图模式状态: </Text>
                    {this.state.mapType == MapTypes.NORMAL ? 
                        <Text onPress={() => this.setState({mapType:MapTypes.SATELLITE})}>普通</Text>
                        :
                        <Text onPress={() => this.setState({mapType:MapTypes.NORMAL})}>卫星</Text>
                    }
                </View>

                {/* 空白区域 */}
                <View style={styles.list}>
                    <Text>地图空白区域附近信息: {this.state.clickMessage}</Text>
                </View>
                <View style={{paddingLeft: 10,marginBottom: 5,}}>
                    <FlatList
                        data={this.state.clickMessageData}
                        keyExtractor={(item,index) => index.toString()}
                        renderItem={this._renderItem}
                        extraData={this.state}
                    />
                </View>

                {/* 已有点 */}
                <View style={styles.list}>
                    <Text>地图已有点点击信息: {this.state.poiMessage}</Text>
                </View>
                <View style={{paddingLeft: 10,marginBottom: 5,}}>
                    <FlatList
                        data={this.state.poiMessageData}
                        keyExtractor={(item,index) => index.toString()}
                        ListHeaderComponent={this._header}
                        renderItem={this._renderItem}
                        extraData={this.state}
                    />
                </View>
                
                <View style={styles.list}>
                    <Text onPress={() => {
                        Geolocation.getCurrentPosition()
                            .then(data => {
                                this.setState({
                                    center: {
                                        longitude: data.longitude,
                                        latitude: data.latitude
                                    },
                                })
                            })
                            .catch(e =>{
                                console.warn(e, 'error');
                            })
                    }}>当前位置</Text>
                </View>
            </ScrollView>
        );
    }
    _header = () => {
        return (
            <Text>附近信息: </Text>
        )
    }
    _renderItem = (item) => {
        
        item = item.item;
        let H = Math.random() * 1000;
        H = Math.ceil(H);
        return (
            <View style={[styles.item,{backgroundColor:`hsl(${H},50%,30%)`}]}>
                <Text style={styles.itemText}>纬度: {item.latitude}</Text>
                <Text style={styles.itemText}>经度: {item.longitude}</Text>
                <Text style={styles.itemText}>地点: {item.name}</Text>
                <Text style={styles.itemText}>地址: {item.address}</Text>
            </View>
        )
    }
}
 
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
    map: {
        width: width,
        height: height - 300,
        marginBottom: 5,
    },
    list: {
        flexDirection: 'row',
        paddingLeft: 10,
        marginBottom: 5,
    },
    item: {
        marginLeft: 10,
        marginRight: 10,
        marginBottom: 5,
        paddingHorizontal: 5,
        paddingVertical: 8,
    },
    itemText: {
        color: '#fff',
    }
});

注: iOS没有实现marker标记