在标记标注点击上加载多边形(反应本机地图)

时间:2019-09-26 05:49:31

标签: react-native react-native-ios react-native-maps

我目前正试图仅在单击特定标记时才在反应本机地图上显示多边形。我已经尝试为列表中的每个事件绘制一个圆圈,但是最终显示了所有圆圈,overlapping - see attached picture

我也试图将Circle放入标记和标注中,但这似乎不起作用。类似于在点击标记时如何显示标注文字,我还希望在其周围显示一个圆圈/多边形。不同的标记将具有不同的关联半径。

感谢您的帮助,谢谢! PS:我在iOS上也有一个错误,有时多边形填充颜色只是决定什么都不是。

(this.state.frenzyEventsList).map(event => (
  <View key={event.id} >
    <Marker 
      pinColor={"purple"}
      coordinate={{latitude: parseFloat(event.loc_lat), longitude: parseFloat(event.loc_long)}}
      title={event.name}
      description={event.description}> 

    <Callout
      alphaHitTest
      tooltip
      onPress={e => {
        if (
          e.nativeEvent.action === 'marker-inside-overlay-press' ||
          e.nativeEvent.action === 'callout-inside-press'
        ) {
          return ;
        }
        this.props.navigation.navigate('EventDetails', {
          title: event.title,
          description: event.description,
          frenzyMode: event.frenzyMode,
        });

      }}
      style={styles.customView}>
      <CustomCallout>                     
          <Text> {event.name} {event.radius} </Text>                   
      </CustomCallout>
    </Callout>
    </Marker>

    <Circle
    ref={ref => { this.invitationRadius = ref; }}

    key = {(this.props.frenzyRadius).toString() }

    center = {{
      latitude: parseFloat(event.loc_lat),
      longitude: parseFloat(event.loc_long), } 
    }
    radius = {parseFloat(event.radius)}
    fillColor =  {'#ffb3b3'}
    strokeColor= {'#e80c25'}
    strokeWidth = { 2 }
    /> 

  </View>

0 个答案:

没有答案