BaiduMap (baidu map) sdk for react-native
npm install react-native-rc-baidumapnpm install react-native-rc-baidumap --save
1. Open your project in XCode, right click on Libraries and click Add Look under
Files to "Your Project Name"node_modules/react-native-rc-baidumap and add RCTBaiduMap.xcodeproj.
2. Add libRCTBaiduMap.a to Build Phases -> Link Binary With Libraries.RCTBaiduMap.xcodeproj
3. Click on in Libraries and go the Build
Settings tab. Double click the text to the right of Header Search
Paths and verify that it has $(SRCROOT)/../react-native/React - if theyRCTBaiduMap
aren't, then add them. This is so XCode is able to find the headers that
the source files are referring to by pointing to thereact-native
header files installed within the node_modulesnode_modules/react-native-rc-baidumap/RCTBaiduMap/RCTBaiduMap/BaiduMap/BaiduMapAPI_*.framework
directory.
4. Add and BaiduMapAPI_Map.framework/Resources/mapapi.bundle to your project.$(PROJECT_DIR)/../node_modules/react-native-rc-baidumap/ios/RCTBaiduMap/RCTBaiduMap/BaiduMap
5. Set your project's framework Search Paths to include .$(SRCROOT)/../node_modules/react-native-rc-baidumap/ios/RCTBaiduMap/RCTBaiduMap
6. Set your project's Header Search paths to include .var MapView =
7. Whenever you want to use it within React code now you can:
require('react-native-rc-baidumap');
1. in android/settings.gradle
``
include ':app', ':react-native-baidumap'
project(':react-native-baidumap').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-baidumap/android/react-native-baidumap')
2. in android/app/build.gradle add:
``
dependencies {
...
compile project(':react-native-baidumap')
}
MainActivity.java
3. in add`
Newer versions of React Native
...
import com.yiyang.reactnativebaidumap.ReactMapPackage; // <--- This!
...
public class MainActivity extends ReactActivity {
@Override
protected String getMainComponentName() {
return "sample";
}
@Override
protected boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List
return Arrays.
new MainReactPackage()
new ReactMapPackage() // <---- and This!
);
}
}
`
Older versions of React Native
``
...
import com.yiyang.reactnativebaidumap.ReactMapPackage; // <--- This!
...
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mReactRootView = new ReactRootView(this);
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setBundleAssetName("index.android.bundle")
.setJSMainModuleName("index.android")
.addPackage(new MainReactPackage())
.addPackage(new ReactMapPackage()) // <---- and This!
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
mReactRootView.startReactApplication(mReactInstanceManager, "MyApp", null);
setContentView(mReactRootView);
}
`AndroidManifest.xml
4. specify your Baidu Maps API Key in your :
`xml`
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"
android:theme="@style/AppTheme">
android:value="{{Your baidu maps API Key Here}}"/>
`
...
import MapView from 'react-native-baidumap';
import KKLocation from 'react-native-baidumap/KKLocation';
...
componentDidMount() {
this.refs["mapView"].zoomToLocs([[39.918541, 116.4835]]);
KKLocation.getCurrentPosition((position) => {
console.log("location get current position: ", position);
}, (error) => {
console.log("location get current position error: ", error);
});
this.watchID = KKLocation.watchPosition((position) => {
console.log("watch position: ", position);
});
}
render() {
ref="mapView"
showsUserLocation={true}
userLocationViewParams={{accuracyCircleFillColor: 'red', image: require('./start_icon.png')}}
annotations={[{latitude: 39.832136, longitude: 116.34095, title: "start", subtile: "hello", image: require('./amap_start.png')}, {latitude: 39.902136, longitude: 116.44095, title: "end", subtile: "hello", image: require('./amap_end.png')}]}
overlays={[{coordinates: [{latitude: 39.832136, longitude: 116.34095}, {latitude: 39.832136, longitude: 116.42095}, {latitude: 39.902136, longitude: 116.42095}, {latitude: 39.902136, longitude: 116.44095}], strokeColor: '#666666', lineWidth: 3}]}
/>
}
``