问:react-native-maps:如何将marker.showCallout() 用于映射为标记的坐标数组 [英] Q: react-native-maps: how to use marker.showCallout() for an array of coordinates mapped as markers

问题描述

我目前正在使用 react-native-maps 来模拟地图空间周围的各种移动对象(模拟项目的实时跟踪)，并在标记旁边显示每个对象的名称.

I'm currently fiddling around with react-native-maps to simulate various moving objects around a map space (simulating real time tracking of items) with a callout showing each object's name beside the marker denoting it.

我目前可以在按下每个标记时显示标注.但是，我打算做的是创建一个按钮，用于打开或关闭地图上每个标记的标注.

I'm currently able to show the callout for each marker whenever I press it. However, what I intend to do is create a button which toggles on or off the callouts for every marker on the map.

我目前正在为我的地图使用 react-native-maps 库.

I'm currently using the react-native-maps library for my map.

我所做的如下:

/* this.props.trackedObjects is an array of objects containing
coordinate information retrieved from database with the following format
  
  trackedObjects=[{
    coordinate:{
      latitude,
      longitude
    },
    userName
  }, ...]
  
*/

/* inside render() */

{this.props.trackedObjects.map((eachObject) => (
  <View>
    <MapView.Marker
      ref={ref => {this.marker = ref;}}
      key={eachObject.userName}
      coordinate={eachObject.coordinate}
    >
      /*Custom Callout that displays eachObject.userName as a <Text>*/
    </MapView.Marker>
  </View>
))}

/* Button onPress method */
onPress(){
  if(toggledOn){
    this.marker.showCallout();
  }else{
    this.marker.hideCallout();
  }
}

似乎当我渲染单个 Marker 组件时，此方法有效.但是，我无法完全使用 showCallout() 来显示整组标记的标注.

It seems that when I render a single Marker component, this method works. However, I can't quite crack my head to get around using showCallout() to show the callouts for an entire group of markers.

有人能解释一下如何去做吗?

Would anyone be able to shed some light on how to go about doing this?

推荐答案

1. 将组件 MapView.Marker 包装成自定义的 Marker:

1. Wrap the component MapView.Marker into a custom Marker:

class Marker extends React.Component {
  marker

  render () {
    return (
      <MapView.Marker {...this.props} ref={_marker => {this.marker = _marker}} />
    )
  }

  componentDidUpdate (prevProps) {
     
     if (prevProps.calloutVisible !== this.props.calloutVisible) {
        this.updateCallout();
    }
  }

  updateCallout () {
    if (this.props.calloutVisible) {
      this.marker.showCallout()
    } else {
      this.marker.hideCallout()
    }
  }
}

2. 相应地更新更高级别的组件，以便通过 prop calloutVisible 提供标注可见性过滤器:

2. Update your higher level component accordingly in order to provide the callout visibility filter via prop calloutVisible:

/* inside render() */

{this.props.trackedObjects.map((eachObject) => (
  <View>
    <Marker
      key={eachObject.userName}
      coordinate={eachObject.coordinate}
      calloutVisible={eachObject.calloutVisible} // visibility filter here
    >
      /*Custom Callout that displays eachObject.userName as a <Text>*/
    </MapView.Marker>
  </View>
))}

这篇关于问:react-native-maps:如何将marker.showCallout() 用于映射为标记的坐标数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！