React Native Maps Go to Marker

user_8569903 0
Viewed 406

So I am building an app that is refreshing a GPS position with a marker. The problem is that the initial region is not near the marker and will change.

I have a button to refresh the GPS position, is there a way to have the map go to the marker?

I do not see anything in the documentation that states this.

<MapView
      style={styles.map}
      initialRegion={region}
      ref={_map}
      onRegionChangeComplete={region => {setRegion(region)}}
    >
      <Marker
        coordinate={{
          latitude: lat,
          longitude: long,
        }}
        key={lat}
        title="Location"
        style={{width: 26, height: 40}}
        description={address}
        resizeMode='contain'
      />
    </MapView>
react-native-maps react-native
1 Answers

You can use de asttribute animateToRegio of react-native-maps.

Something like this:

function getLocation(){
    Geolocation.getCurrentPosition(position => {
      const region = {
        latitude: position.coords.latitude,
        longitude: position.coords.longitude,
        latitudeDelta: 0.0043,
        longitudeDelta: 0.0034
      };
      map.current.animateToRegion(region, 500);
    });
  };

Then, on a button or whatever you want, you can call that function to go to your position, or you can change latitude and longitude to your marker coords

user_149338910
Related