百度地圖的React-Native Android版本

百度地圖的React-Native版本

example

'use strict';

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

import BaiduMap from 'baidumapkit';


class BaiduMapExample extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          React Native Baidu MapView!
        </Text>
        <BaiduMap
          style={{flex:1}}
          marker={[
            [39.963175, 116.440244],
            [39.903175, 116.490244],
            [39.923175, 116.490244],
            [39.953175, 116.490244]]}
          mode={2} //1. 普通 2.衛星
          trafficEnabled={true} //城市實時交通圖
          heatMapEnabled={true} //城市實時交通熱力圖
        />
      </View>
    );
  }
}

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    color: 'red',
    textAlign: 'center',
    margin: 10,
  }
});

AppRegistry.registerComponent('BaiduMapExample', () => BaiduMapExample);

效果圖

step 1 install

$ npm install baidumapkit --save

Step 2 - Update Gradle Settings

// file: android/settings.gradle
...

include ':baidumapkit',  ':app'
project(':baidumapkit').projectDir = new File(rootProject.projectDir, '../node_modules/baidumapkit')

Step 3 - Update app Gradle Build

// file: android/app/build.gradle
...

dependencies {
    ...
    compile project(':baidukitmap')
}

Step 4 - Register React Package

public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {

  private ReactInstanceManager mReactInstanceManager;
  private ReactRootView mReactRootView;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      //初始化百度地圖
      SDKInitializer.initialize(getApplicationContext());

      mReactRootView = new ReactRootView(this);
      mReactInstanceManager = ReactInstanceManager.builder()
              .setApplication(getApplication())
              .setBundleAssetName("index.android.bundle")
              .setJSMainModuleName("index.android")
              .addPackage(new MainReactPackage())
              .addPackage(new BaiduMapReactPackage(this)) // <-- Register package here
              .setUseDeveloperSupport(true)
              .setInitialLifecycleState(LifecycleState.RESUMED)
              .build();

      mReactRootView.startReactApplication(mReactInstanceManager, "AwesomeProj", null);
      setContentView(mReactRootView);
  }

update AndroidManifest.xml，填寫申請的app的key

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="百度注冊的app的name">

    <!--地圖要求的權限-->
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
    <uses-permission android:name="android.permission.INTERNET"/>
    <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"/>
    <uses-permission android:name="android.permission.WRITE_SETTINGS" />


    <application
      android:allowBackup="true"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:theme="@style/AppTheme">

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

</manifest>

項目主頁：http://www.baiduhome.net/lib/view/home/1449407941180