React-native:如何在react-native-maps中单击标记显示工具提示

时间:2017-02-25 11:12:26

标签: react-native react-native-maps

我正在使用react-native-maps模块。我已经给出了lat和long值,并且在点击标记时我使用了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>

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

1 个答案:

答案 0 :(得分:7)

我无法找到任何关于MapView的onLoad道具的文档,因此我将onLayout改为suggested here。您需要使用标记的showCallout method来显示工具提示。为此,请为标记添加一个ref,然后在onLayout中为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>