I'm using react-native-maps
, I have map showing and also my current latitude and longitude but I don't know how to show the marker in the map with latitude and longitude.
Code for lat and long:
callLocation(that){
navigator.geolocation.getCurrentPosition(
(position) => {
const currentLongitude = position.coords.longitude;
const currentLatitude = position.coords.latitude;
that.setState({ currentLongitude:currentLongitude });
that.setState({ currentLatitude:currentLatitude });
},
(error) => alert(error.message),
{ enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
);
that.watchID = navigator.geolocation.watchPosition((position) => {
console.log(position);
const currentLongitude = position.coords.longitude;
const currentLatitude = position.coords.latitude;
that.setState({ currentLongitude:currentLongitude });
that.setState({ currentLatitude:currentLatitude });
});}
Code for Map:
<View style={styles.container}>
<MapView
style={styles.map}
initialRegion={{
latitude: this.state.currentLatitude,
longitude: this.state.currentLongitude,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}>
</MapView>
</View>
You should use the Marker
component.
Example:
import { MapView, Marker } from 'react-native-maps';
<MapView
style={styles.map}
initialRegion={{
latitude: this.state.currentLatitude,
longitude: this.state.currentLongitude,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
>
<Marker
coordinate={{latitude: 40.741075, longitude: 74.0003317}}
title={'title'}
description={'description'}
/>
</MapView>
Working example:
<MapView provider={Platform.OS === 'android' ? PROVIDER_GOOGLE : PROVIDER_DEFAULT} // remove if not using Google Maps
style={{width: '100%', height: FULL_SH*0.51, marginTop: 65*SH}}
initialRegion={{
latitude: this.state.myLat ? this.state.myLat : 38.4555,
longitude: this.state.myLon ? this.state.myLon : 27.1199,
latitudeDelta: 0.015,
longitudeDelta: 0.0121}}>
<MapView.Marker
coordinate={{latitude: 38.4555, longitude: 27.1199}}
title={'Deneme'}
/>
<MapView.Marker
onPress={() => this.setState({visible: true}) + setTimeout(() => alert(this.state.visible), 200)}
description={'güzel mekan'}
coordinate={{latitude: 38.4555, longitude: 27.1129}}
title={'Deneme'}/>
</MapView>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.