Hiển thị bản đồ OSM | Maps SDKs for React Native

Hướng dẫn này chỉ cho bạn cách thêm Bản đồ OSM phiên bản Sáng do eKMap Platform cung cấp trên nền tảng React Native.

Bạn có thể xem thêm danh sách các loại bản đồ OSM tại đây

React Native

import React, {Component} from 'react';
 
import {StyleSheet, View} from 'react-native';
 
import MapboxGL from '@react-native-mapbox-gl/maps';
 
export default class App extends Component {
 
constructor(props) {
super(props);
this.state = {
coordinates: [109.11,16.34] //Việt Nam
};
}
 
render() {
return (
 
<View style={styles.MainContainer}>
 
<View style={styles.SubContainer}>
 
<MapboxGL.MapView style='https://api.ekgis.vn/v2/mapstyles/style/osmplus/bright/style.json?api_key={YOUR_API_KEY}'>
<MapboxGL.Camera
zoomLevel={5}
centerCoordinate={this.state.coordinates}
/>
 
<MapboxGL.PointAnnotation coordinate={this.state.coordinates} />
 
</MapboxGL.MapView>
 
</View>
 
</View>
 
);
}
}
 
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
},
SubContainer: {
height: '100%',
width: '100%',
backgroundColor: 'white',
},
Mapbox: {
flex: 1,
},
});