React-native：如何在不单击react-native-maps中的标记的情况下显示工具提示

Question

我正在使用react-native-maps模块。我已经给出了纬度和经度值，并且我使用MapView.Marker在单击标记时显示标记和工具提示。

但是，现在我想在地图最初加载时显示工具提示，而无需单击标记。

这是我的代码：

 <View style={styles.page}>
            <MapView
              ref="map"
              style={styles.map}
              region={this.state.region}
              provider = {PROVIDER_DEFAULT}
              zoomEnabled={true}
              onRegionChange={this.onRegionChange.bind(this)}
              pitchEnabled={true}
              showsCompass={true}
              liteMode={false}
              showsBuildings={true}
              showsTraffic={true}
              showsIndoors={true}
            >
            <MapView.Marker
          coordinate={this.state.marker.latlng}
          title={this.state.marker.title}
          description={this.state.marker.description}
          image={require('./assets/pin.png')}/>
        
       </MapView>
</View>

任何人都可以帮忙解决这个问题吗...

Answer 1

我找不到任何有关 MapView 的 onLoad 属性的任何文档，因此我使用 onLayout 来代替 此处建议。您需要使用标记的 showCallout 方法 来显示工具提示。为此，请为标记添加一个引用，然后您可以在 MapView 的 onLayout 中使用该引用。

<View style={styles.page}>
    <MapView
        ref="map"
        style={styles.map}
        region={this.state.region}
        provider = {PROVIDER_DEFAULT}
        zoomEnabled={true}
        onRegionChange={this.onRegionChange.bind(this)}
        pitchEnabled={true}
        showsCompass={true}
        liteMode={false}
        showsBuildings={true}
        showsTraffic={true}
        showsIndoors={true}
        onLayout={() => { this.mark.showCallout(); }}
    >
        <MapView.Marker
            ref={ref => { this.mark = ref; }}
            coordinate={this.state.marker.latlng}
            title={this.state.marker.title}
            description={this.state.marker.description}
            image={require('./assets/pin.png')}
        />
    </MapView>
</View>

Answer 2

对我有用的是在特定标记上使用 ref

const originMarker = useRef(null);

然后在组件安装上：originMarker?.current?.showCallout();