Показать выноску маркера на реактивных картах - PullRequest
Новая
       46

Показать выноску маркера на реактивных картах

0 голосов
/ 17 января 2019

Я хочу показать выноску моего маркера, когда у меня есть адрес и адрес возврата. Я использую метод .showCallout () в componentDidUpdate main.js. Когда я использую это с определенным маркером координат, это работает. Но когда я пытаюсь показать выноску маркера о том, что его координаты передаются из parent (main.js), это не работает.
Мои коды в 2 случаях:

Случай 1: Маркер конкретных координат

MapContainer.js 

showCallout = () => {
    this.pickUpMarker.showCallout();
};
render() {
    return (
      <View style={styles.mapViewContainer}>
        {
          this.props.region.latitude &&
          <MapView
            style={styles.mapView}
            provider={MapView.PROVIDER_GOOGLE}
            initialRegion={this.props.region}
            showsUserLocation={true}
            ref={ref => { this.map = ref; }}
            customMapStyle={customStyle}
          >

            <MapView.Marker
              pinColor="green"
              ref={ref => this.pickUpMarker = ref}
              image={marker}
              coordinate={{
                latitude:  20.966918,
                longitude: 105.770016
              }}

            >
              <MapView.Callout tooltip={true}>
                <View style={styles.title}>
                  <Text numberOfLines={1} style={styles.titleText}>Callout</Text>
                  <View style={styles.titleIcon}>
                    <Icon.FontAwesome name="chevron-right" size={14} color={Colors.gray200}/>
                  </View>
                </View>
              </MapView.Callout>
            </MapView.Marker>
            </MapView>
        }
      </View>
       );
  }
}

Случай 2: координаты передаются из main.js

MapContainer.js 

showCallout = () => {
    this.pickUpMarker.showCallout();
};
render() {
    return (
      <View style={styles.mapViewContainer}>
        {
          this.props.region.latitude &&
          <MapView
            style={styles.mapView}
            provider={MapView.PROVIDER_GOOGLE}
            initialRegion={this.props.region}
            showsUserLocation={true}
            ref={ref => { this.map = ref; }}
            customMapStyle={customStyle}
          >

            {
              this.props.bookingInfo.pickUp.location.latitude!=='' ?
                <MapView.Marker
                  coordinate={this.props.bookingInfo.pickUp.location}
                  image={marker}
                  ref={ref => this.pickUpMarker = ref}
                >
                  <MapView.Callout tooltip={true}>
                    <View style={styles.title}>
                      <Text numberOfLines={1} style={styles.titleText}>{this.props.bookingInfo.pickUp.desc}</Text>
                      <View style={styles.titleIcon}>
                        <Icon.FontAwesome name="chevron-right" size={14} color={Colors.gray200}/>
                      </View>
                    </View>
                  </MapView.Callout>
                </MapView.Marker>
                : null
            }
            </MapView>
        }
      </View>
       );
  }
}

main.js 

...
componentDidUpdate = async (prevProps, prevState) => {
    if(this.state.booking.pickUp.placeID && this.state.booking.dropOff.placeID
      && ((this.state.booking.pickUp.placeID!==prevState.booking.pickUp.placeID)
        || (this.state.booking.dropOff.placeID!==prevState.booking.dropOff.placeID))
    ) {
      //Show callout when have pick up and drop off address
      this.mapContainer.showCallout()
    }
  };
...
render() {
    return (
      <View style={styles.container}>
        <MapContainer
          region={this.state.region}
          coords={this.state.coordinates}
          bookingInfo={this.state.booking}
          nearByDrivers={this.state.nearByDrivers}
          ref={ref => this.mapContainer = ref}
        />
        ...
      </View>
  )
}

Если мой английский смущает вас, пожалуйста, прокомментируйте ваши вопросы, я постараюсь объяснить это подробно.
Спасибо.

...