javascript - React native how to center map on user location - Stack Overflow

admin管理员组

文章数量:1341899

<MapView style={styles.map}
      showsUserLocation = {true}
>

1. How to center map on user location in Android?
2. How to change this blue circle with other user location marker?

<MapView style={styles.map}
      showsUserLocation = {true}
>

1. How to center map on user location in Android?
2. How to change this blue circle with other user location marker?

• javascript
• react-native

Share Follow edited Dec 30, 2017 at 2:38 jwpfox 5,2501111 gold badges4848 silver badges4242 bronze badges asked Dec 5, 2017 at 19:05 Damian SzmulikDamian Szmulik 2111 gold badge11 silver badge55 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

You could make use of ref here like so:

<MapView ref={map => {this.map = map}} />

and then in the function that you call when you want to center the map, assuming you have the location of the user stored in the state somewhere, you could do this

handleCenter = () => {
  const { latitude, longitude, latitudeDelta, longitudeDelta } = this.state.location;
  this.map.animateToRegion({
    latitude,
    longitude,
    latitudeDelta,
    longitudeDelta
  })
}

react-native-maps uses animateToRegion to update the shown region of the map to a specific one and you need to supply the method with a region to go to.

You could also update the region prop on the map programatically to achieve the same effect, without the animation though.

As for the second part of the question, I am not sure I understand what you want to do. Could you maybe reword the second question?

本文标签： javascriptReact native how to center map on user locationStack Overflow