Как перейти к моему текущему местоположению с помощью пользовательской кнопки в react-native-maps?

Я использую реактивные карты на Android. Я помещаю пользовательскую кнопку, нажатие на которую должно перейти к предоставленным координатам (мое текущее местоположение)

<MapView
          ref={(map) => { this.map = map; }}
          provider={PROVIDER_GOOGLE}
          style={{ height: '100%', width: '100%' }}
          annotations={markers} 
          showsUserLocation={true}
          showsMyLocationButton={true}
          initialRegion={this.state.region}
          onRegionChangeComplete={this.onRegionChange}
        >

моя кнопка -

<TouchableOpacity onPress={this.gotToMyLocation} style={[Style.alignJustifyCenter, {
          width: 60, height: 60,
          position: "absolute", bottom: 20, right: 20, borderRadius: 30, backgroundColor: "#d2d2d2"
        }]}>
          <Image
            style={{ width: 40, height: 40 }}
            source={Images.myLocation}
          />
        </TouchableOpacity>

метод gotToMyLocation -

gotToMyLocation(){
    console.log('gotToMyLocation is called')
    navigator.geolocation.getCurrentPosition(
      ({ coords }) => {
        console.log("curent location: ", coords)
        console.log(this.map);
        if (this.map) {
          console.log("curent location: ", coords)
          this.map.animateToRegion({
            latitude: coords.latitude,
            longitude: coords.longitude,
            latitudeDelta: 0.005,
            longitudeDelta: 0.005
          })
        }
      },
      (error) => alert('Error: Are location services on?'),
      { enableHighAccuracy: true }
    )
  }

console.log(this.map) всегда показывает undefined.

Я хочу переместить карту в мое текущее местоположение при нажатии кнопки.


person newdeveloper    schedule 28.07.2019    source источник


Ответы (2)


На самом деле я обнаружил глупую ошибку, когда привязка метода заставит его работать. может кому пригодится. this.gotToMyLocation = this.gotToMyLocation.bind(this);

person newdeveloper    schedule 28.07.2019

переместите вашу функцию gotToMyLocation:

если используется класс - в классе перед рендерингом()

or

если используете функцию - используйте функцию gotToMyLocation(){...} и не используйте это

person Mohit Gupta    schedule 18.02.2021