代码之家 › 专栏 › 技术社区 › Michael

在本地地图中显示标记的标注

react-native-maps expo react-native javascript

Michael · 技术社区 · 7 年前

当我有取车地址和下车地址时,我想显示标记的标注。我使用这种方法。main的componentDidUpdate中的showCallout()。js。当我把它和特定的坐标标记一起使用时,它就起作用了。但当我试图显示一个标记的标注,它的坐标是从父对象(main.js)传递过来的,这是行不通的。
我的代码分为两种情况:

案例1:特定坐标标记

地图容器。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:坐标从主节点传递。js

地图容器。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>
       );
  }
}

主要的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>
  )
}

如果我的英语让你困惑,请评论你的问题,我会尽力详细解释。
非常感谢。

0 回复 | 直到 7 年前