React-native:如何在不单击 react-native-maps 中的标记的情况下显示工具提示 [英] React-native: How to Show the tooltip with out clicking on marker in react-native-maps

问题描述

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

I am using react-native-maps module.I have given lat and long values and i have used MapView.Marker to show the Marker and tooltip when clicking on the marker.

但是，现在我想在地图最初加载时不点击标记来显示工具提示.

But, Now I want to show the tooltip with out clicking on the marker when the map loads initially.

这是我的代码:

<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>

谁能帮忙解决这个问题...

Can any one help how to solve this...

推荐答案

我找不到关于 MapView 的任何类型的 onLoad 道具的任何文档，所以我使用 onLayout 代替 此处建议.您将需要使用 showCallout 方法 用于标记以显示工具提示.为此，请为标记添加一个引用，然后您可以在 MapView 的 onLayout 中使用该引用.

I couldn't find any documentation on any sort of onLoad prop for MapView so I used onLayout instead as suggested here. You will need to use the showCallout method for the Marker to show the tooltip. To do this, add a ref for the marker that you can then use in onLayout for the MapView.

<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>

这篇关于React-native:如何在不单击 react-native-maps 中的标记的情况下显示工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！