javascript - 在重新加载时删除标记时,react-native-maps 中的 callout View 不会消失

标签 javascript reactjs google-maps react-native react-native-maps

我正在为我的 react-native 项目使用 react-native-maps。我在 map 上显示了从 UI 分配和取消分配的标记。我使用 API 获取标记数据并将它们显示在 map 中。每个标记都有一个标题和描述,单击标记时会显示该标题和描述。

                   <MapView.Marker
                        coordinate={{ latitude:lat, longitude:lon }}
                        title={title}
                        description={desc}
                        image={image}
                        onCalloutPress={this.onPress()}>
                    </MapView.Marker>

但是,当我单击一个标记然后从 UI 中删除该标记时。我会收到通知并重新加载新数据。但 callOut 不会被删除,而是会转到最近的标记。

当我重新加载我的标记数据时,我如何关闭或删除 callOut?

注意:我无法重新加载整个 map ,所以我使用 fetch 获取最新数据并更新它们。

最佳答案

以下对我有用。当您需要隐藏它时尝试调用 this.marker.hideCallout() 怎么样?

<MapView.Marker
        coordinate={coord}
        ref={_marker => {
          this.marker = _marker;
        }}
        onPress={() => {}}
        onCalloutPress={() => {
          this.marker.hideCallout();
        }}>
        <Image
          source={require(img)}
          style={{ width: 60, height: 60 }}
        />
        <View>
          <Text>
            marker text
          </Text>
        </View>
        <MapView.Callout
          tooltip={true}>
              <View>
                <Text>
                  callout text
                </Text>
              </View>
        </MapView.Callout>
      </MapView.Marker>

关于javascript - 在重新加载时删除标记时,react-native-maps 中的 callout View 不会消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49530977/

相关文章:

javascript - $pull 数组嵌入文档 MongoDB

javascript - jQuery clone() 将用户数据留在输入字段中

javascript - 如何在 Nodejs 流中正确处理异步操作

javascript - 使用 Redux Reselect 过滤评论

node.js - 在 react-native npm start 中卡在 "Dependency Graph, done."

javascript - 获取目录 map 的帖子位置

javascript - Ember : click event on a view not firing

javascript - 使用socket.io与 react 问题

swift - 在显示之前将 uiview 转换为 uiimage

google-maps - 如何从移动 Safari 浏览器链接到 native Google Maps iOS 应用程序