Блог

У меня есть список с маркерами на странице, и я хочу перейти к маркеру на карте, когда я нажимаю на кнопку.

Это краткая версия list.js:

 export default class List extends Component {

    render() {

        const markerOneLocation = {
            latitude: 52.587374, 
            longitude: 5.137634,
            latitudeDelta: 0.3,
            longitudeDelta: 0.3,
       };

       const showMarkerOne = () => {
           this.props.navigation.navigate('Map', 
           {initialLocation: markerOneLocation});
       }; 

       return (
           <Text onPress={this.toggle}>
              <Text style={{fontSize: 15}} onPress= 
              {showMarkerOne} title='Marker1'> Marker 1 </Text>
           </Text>
       )
   }
}
 

Это краткая версия map.js:

    export default class Map extends Component {

       render() {
           return(
              <MapView
                style={{height: '100%', width: '100%'}}
                provider={PROVIDER_GOOGLE}
                region={{
                    latitude: 52.100748,
                    longitude: 5.646090,
                    latitudeDelta: 4,
                    longitudeDelta: 4,
                }}
              >
                <Marker
                  coordinate={{
                    latitude: 52.474772,
                    longitude: 5.197672
                  }}
                  anchor={{ x: 0.5, y: 0.5 }}
                >
                  <Image
                    source={require('../src/
                           logo_noshadow.png')}
                    style={{ width: 20, height: 20 }}
                  />
                </Marker>
              </MapView>
          )
      }
  }
 

итак, когда я нажимаю кнопку, чтобы перейти к карте. Я хочу, чтобы карта переходила к маркеру и показывала его в центре.

Я попытался добавить markerId в качестве параметра, но я не знаю, как добавить его к маркеру.

Кто-нибудь может мне помочь с этим?

В MapView вы можете установить ссылку. В подходе, основанном на перехватах, это будет выглядеть примерно так:

 const mapRef = React.useRef(null);

<MapView
    ref={mapRef}
    ... the rest of your settings
/>
 

Я вижу, что вы используете подход, основанный на классах, но ссылки доступны и там.
Затем по этой ссылке у вас будет вызван метод fitToSuppliedMarkers .
В качестве первого параметра он принимает массив marker identifiers и при вызове фокусирует карту на маркерах, которые соответствуют предоставленному списку.

 mapRef.current.fitToSuppliedMarkers([ArrayContaingMarkersIdentifiers], {
    animated: true,
    edgePadding: {
        top: 50,
        right: 50,
        bottom: 50,
        left: 50,
    },
});
 

https://github.com/react-native-maps/react-native-maps/blob/master/docs/mapview.md#methods

Чтобы это сработало, вам нужно добавить уникальный identifier для каждого <Marker />

https://github.com/react-native-maps/react-native-maps/blob/master/docs/marker.md

Я вижу, что вы используете подход, основанный на классах, но ссылки доступны и там.