Question

我试过在MapView.Marker Tab中调用onPress方法，但是它没有用。

此跟踪标记点击的方法：

markerClick(){
      console.log("Marker was clicked");
 }

在render方法中，Map组件被声明为显示map和地图上的标记。在onPress方法中，我调用了自定义方法 markerClicked（）。我仍然没有得到结果。

render() {
        return (

          <View style={styles.container}>
            <MapView style={styles.map}
              initialRegion={{
                  latitude: 37.78825,
                  longitude: -122.4324,
                  latitudeDelta: 0.0,
                  longitudeDelta: 0.0,
              }}
            >
            {this.state.markers.map(marker => (
              <MapView.Marker
                coordinate={marker.coordinate}
                title={marker.title}
                description={marker.description}
                onPress={() => this.markerClick()}
              />
            ))}
          </MapView>
        </View>
      );
  }

Answer 1

您只需在<MapView.Callout>代码中添加<MapView.Marker>即可。自定义标注 - 您可以根据需要自定义标记信息点击窗口。

我已将TouchableHighlight用于marker info window click，以便您可以点击custom callout将用户重定向到其他屏幕。

<View style={styles.mainContainer}>
                  <MapView style={styles.map}
                          initialRegion={{
                              latitude: 37.78825,
                              longitude: -122.4324,
                              latitudeDelta: 0.0,
                              longitudeDelta: 0.0,
                            }}>
                            {this.state.markers.map((marker) => (
                              <MapView.Marker
                                coordinate={marker.coordinate}
                                title={marker.title}
                                description={marker.description}>
                                  <MapView.Callout tooltip style={styles.customView}>
                                      <TouchableHighlight onPress= {()=>this.markerClick()} underlayColor='#dddddd'>
                                          <View style={styles.calloutText}>
                                              <Text>{marker.title}{"\n"}{marker.description}</Text>
                                          </View>
                                      </TouchableHighlight>
                                    </MapView.Callout>
                                </MapView.Marker>
                            ))}
                     </MapView>
                  </View>

Answer 2

要添加到Anil的答案，您可以使用＆＃39; onCalloutPress＆＃39;在Marker上回调以处理标注新闻事件，这样您就不需要在标注中使用TouchableHighlight：

<MapView.Marker
   coordinate={marker.coordinate}
   title={marker.title}
   description={marker.description}
   onCalloutPress={this.markerClick}>
   <MapView.Callout tooltip style={styles.customView}>
       <View style={styles.calloutText}>
          <Text>{marker.title}{"\n"}{marker.description}</Text>
       </View>
   </MapView.Callout>
</MapView.Marker>

Answer 3

尝试在标记中添加“密钥”：

{this.state.markers.map((marker, i) => (
    <MapView.Marker
      key={i}
      coordinate={marker.coordinate}
      title={marker.title}
      description={marker.description}
      onPress={() => this.markerClick()}
    />
 ))}

只需使用'i'进行测试，您应该使用唯一ID

Answer 4

onCalloutPress = {this.markerClick（）}对我有用。希望这会有所帮助。

Answer 5

let convert = () => {cmd.run('ffmpeg -re -i 
"https://mnmedias.api.telequebec.tv/m3u8/29880.m3u8" -acodec libmp3lame -ar 
44100 -b:a 128k -pix_fmt yuv420p -profile:v baseline -s 426x240 -bufsize 
6000k -vb 400k -maxrate 1500k -deinterlace -vcodec libx264 -preset veryfast 
-g 30 -r 30 drawtext="fontfile=/path/to/font.ttf: \ text='Stack Overflow': 
fontcolor=white: fontsize=24: box=1: boxcolor=black@0.5: \ boxborderw=5: x=
(w-text_w)/2: y=(h-text_h)/2" -f flv "rtmp://ingest-us-
east.a.switchboard.zone/live/moo-7hup2-mqxsa-b6kmd-gj2gq"');}

标记点击事件反应原生地图不起作用反应ios

5 个答案: