hey i am trying to add overlay marker which stays in center of the screen like this even if we scroll or zoom the screen
i tried moving marker from its initial position but it lags behind when we move screen fast. so i want to set marker image in the center of the screen
here is the code what i have done to move marker:
ponentDidMount: function() {
this.fetchData();
navigator.geolocation.getCurrentPosition(
(position) => {
this.setState({
region: {
latitude: position.coords.latitude,
longitude: position.coords.longitude,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA
}
});
},
);
this.watchID = navigator.geolocation.watchPosition((position) => {
const newRegion = {
latitude: position.coords.latitude,
longitude: position.coords.longitude,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA
}
this.onRegionChange(newRegion);
});
},
ponentWillUnmount: function() {
navigator.geolocation.clearWatch(this.watchID);
},
onRegionChange(region) {
this.setState({ region });
},
so how can i overlay a marker image?
hey i am trying to add overlay marker which stays in center of the screen like this even if we scroll or zoom the screen
i tried moving marker from its initial position but it lags behind when we move screen fast. so i want to set marker image in the center of the screen
here is the code what i have done to move marker:
ponentDidMount: function() {
this.fetchData();
navigator.geolocation.getCurrentPosition(
(position) => {
this.setState({
region: {
latitude: position.coords.latitude,
longitude: position.coords.longitude,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA
}
});
},
);
this.watchID = navigator.geolocation.watchPosition((position) => {
const newRegion = {
latitude: position.coords.latitude,
longitude: position.coords.longitude,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA
}
this.onRegionChange(newRegion);
});
},
ponentWillUnmount: function() {
navigator.geolocation.clearWatch(this.watchID);
},
onRegionChange(region) {
this.setState({ region });
},
so how can i overlay a marker image?
Share Improve this question asked Jul 21, 2016 at 9:49 atifatif 7694 gold badges13 silver badges25 bronze badges1 Answer
Reset to default 7I see two options to solve this issue:
The MapView way
Just add a MapView.Marker with the position of your region variable:
<MapView
style={styles.map}
region={this.state.region}
onRegionChange={this.onRegionChange.bind(this)}>
<MapView.Marker
coordinate={{latitude: this.state.region.latitude, longitude: this.state.region.longitude}}
/>
</MapView>
In my opinion this is the "correct" way, though I face the issue, that the Marker updates its position with a small delay: As I move the map, it stays on its position in respect to the map and a after a few hundred milliseconds it jumps back to the center of the map (suggestions on how to debug or fix this issue are very wele).
The second option overes this issue
The Icon way
Put your MapView inside a View, that fills the whole space. Inside the View add a centered Icon and your map:
<View style={StyleSheet.absoluteFillObject}>
<Icon name="map-marker"
style={{
zIndex: 3,
position: 'absolute',
marginTop: -37,
marginLeft: -11,
left: '50%',
top: '50%'}}
size={40}
color="#f00" />
<MapView
style={StyleSheet.absoluteFillObject}
region={this.state.region}
onRegionChange={this.onRegionChange.bind(this)}>
</MapView>
</View>
Note the use of zIndex to overlay it in front of the MapView and marginTop/marginLeft which can be used to place the needletip of the marker on the center.