Не удается получить ссылку на MapView - реагировать на собственные карты

Я пытался использовать методы MapView для анимации в регионе, для этого мне нужен доступ к ссылке, но она не определена. Все остальное работает правильно, я просто не могу получить ссылку и каждый раз, когда пытаюсь вызвать метод, например `

this.map.animateToRegion({
  latitude: 0,
  longitude: 0,
  latitudeDelta: 1,
  longitudeDelta: 1
});

Я получаю сообщение об ошибке:

Не удается прочитать свойство 'animateToRegion' неопределенного

<MapView
  ref={r => this.map = r}
  mapPadding={{ top: 0, left: 0, right: 0, bottom: 400 }}
  provider='google'
  style={{ flex: 1 }}
  region={this.region}
>
  {this.renderBarberMarkers()}
</MapView>

react-native reactjs react-native-maps
person Craques    schedule 15.07.2019    source источник
comment
Столкнулся с такой же проблемой..   -  person Berke    schedule 12.12.2019

Ответы (4)


arrow_upward
7
arrow_downward

Если вы используете хуки, вот ваш способ:

Помимо вашей функции:

const mapView = React.createRef();
const animateMap = () => {
    mapView.current.animateToRegion({ // Takes a region object as parameter
        longitude: 28.97916756570339,
        latitude: 41,
        latitudeDelta: 0.4,
        longitudeDelta: 0.4,
    },1000);
}

Дайте вашему MapView ссылку следующим образом:

<MapView provider={PROVIDER_GOOGLE} region={{
       latitude: 37.78825,
       longitude: -122.4324,
       latitudeDelta: 0.015,
       longitudeDelta: 0.0121,
   }}
   ref={mapView}
   style={{flex:1}}>
</MapView>

Последнее, что нужно сделать, это запустить анимацию, вы можете сделать что-то вроде этого:

<TouchableOpacity onPress={animateMap}><Text>Start</Text></TouchableOpacity>
person Halil Şağan    schedule 20.08.2020
comment
это идеально, я не мог понять, куда все должно идти, и теперь моя карта прекрасна :D - person Taha Attari; 23.12.2020

arrow_upward
4
arrow_downward

вот картаВью

<MapView
  ref={(map) => { this.map = map; }}
  showsUserLocation={true}
  showsMyLocationButton={true}
  initialRegion={this.state.region}
/>

тогда вам нужно позвонить

//animate to user current location
this.map.animateToRegion(yourRegionObject,1000)

Я использую вот так;

//to get user location
getLocation(){

    navigator.geolocation.getCurrentPosition(
        (position) => {
            let latitude = parseFloat(position.coords.latitude);
            let longitude = parseFloat(position.coords.longitude);

            console.log('location position: ', position);

            let region = {
                latitude: latitude,
                longitude: longitude,
                latitudeDelta: 0.0522,
                longitudeDelta: 0.0321,
            };

            this.setState({region: region});

            console.log('position: ', position);
            console.log('this.map: ', this.map);

            //animate to user current location
            this.map.animateToRegion(region,1000)


        },
        (error) => console.log('position error!!!', error),
        {enableHighAccuracy: false, timeout: 3000}
    );
}
person Orhan    schedule 16.07.2019

arrow_upward
1
arrow_downward

с крючком вы можете использовать

первый импорт useRef, useEffect

import React, {useRef, useEffect} from 'react';

потом

const mapRef = useRef(null);

добавьте в свой элемент MapView:

<MapView
 provider={PROVIDER_GOOGLE}
 ref={mapRef} />

вы можете найти MapRef в использовании

useEffect(() => {
    if (mapRef) {
      console.log(mapRef);
    }
});
person Amir Ardalan    schedule 25.06.2020

arrow_upward
0
arrow_downward

Вы пробовали использовать

React.createRef();

со своей картой?

or

что я сделал, так это экспортировал его за пределы моего класса, как это

export let mapRef: MapView | null;

а также создали экспортированные функции, такие как

export function animateToRegion(region: Region, duration?: number) {
  if (mapRef) {
    mapRef.animateToRegion(region, duration);
  }
}

и мой MapView выглядит примерно так

    <MapView
 ref={(c) => mapRef = c}
 showsMyLocationButton={false} />

вне моего класса, таким образом, если это компонент, вы можете просто вызвать его.

person Joshua    schedule 15.07.2019
comment
Я пробовал оба решения раньше, я не мог понять второе. Я не понимаю строку export let mapRef: MapView | null; , что она делает. Это похоже на TypeScript, поправьте меня, если я ошибаюсь, и я использую Javascript - person Craques; 16.07.2019