【问题标题】:React-native: How to Show the tooltip with out clicking on marker in react-native-mapsReact-native:如何在不单击 react-native-maps 中的标记的情况下显示工具提示
【发布时间】:2017-02-25 11:12:26
【问题描述】:

我正在使用 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>

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

【问题讨论】:

    标签: react-native react-native-maps


    【解决方案1】:

    我找不到任何关于 MapView 的任何类型的 onLoad 道具的文档,所以我使用 onLayout 代替 suggested here。您需要使用 showCallout method 标记来显示工具提示。为此,请为标记添加一个 ref,然后您可以在 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>
    

    【讨论】:

    • 您好,感谢您的回复,我正在使用您修改过的代码,但我有一个小错误。我怎么写 onLayout() 函数你能给我建议吗
    • @Lavaraju 您遇到什么错误?示例代码应该可以正常工作,因为我在发布之前对其进行了测试。
    • 错误是找不到 layout() 函数
    • @Lavaraju 你的意思是onLayout吗?该方法应该是 onLayout(区分大小写),而不是布局。
    • 是的,但我没有得到
    猜你喜欢
    • 2020-02-22
    • 1970-01-01
    • 1970-01-01
    • 2019-03-22
    • 1970-01-01
    • 1970-01-01
    • 2019-09-29
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多