Thêm Marker lên bản đồ

Thêm marker

Thêm Marker lên bản đồ
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,
myMarker: [109.11,16.34]
};
}
render() {
return (
<View style={styles.MainContainer}>
<View style={styles.SubContainer}>
<Mapbox.MapView key='mainmap'>
<Mapbox.PointAnnotation
key="key1"
id="id1"
title="Test"
coordinate={this.state.myMarker}>
</Mapbox.PointAnnotation>
</Mapbox.MapView>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
},
SubContainer: {
height: '100%',
width: '100%',
backgroundColor: 'white',
},
Mapbox: {
flex: 1,
},
markerContainer: {
alignItems: "center",
width: 60,
backgroundColor: "transparent",
height: 70,
},
textContainer: {
backgroundColor: "white",
borderRadius: 10,
flex: 1,
flexDirection: "row",
alignItems: "center",
},
text: {
textAlign: "center",
paddingHorizontal: 5,
flex: 1,
}
});
<div id="map"></div>
//mapbox
<script>
var map = new mapboxgl.Map({
container: 'map',
center: [105, 17],
zoom: 4
});
/* Bản đồ nền */
var basemap = new ekmapplf.VectorBaseMap('OSM:Bright', '{YOUR_API_KEY}');
basemap.addTo(map);
//thêm marker
new mapboxgl.Marker({ color: '#c014df' })
.setLngLat([105.842392, 21.025755])
.addTo(map);
new mapboxgl.Marker().setLngLat([108.203065, 16.042951]).addTo(map);
new mapboxgl.Marker({ color: 'black' })
.setLngLat([106.634588, 10.807779])
.addTo(map);
</script>
//end