百度地图的React-Native Android版本
ygfb
8年前
百度地图的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>