时间戳

首页 > 解决方案 > 标注内的按钮单击在本机地图-android中不起作用

react-native - 标注内的按钮单击在本机地图-android中不起作用

问题描述

caaout 内的可触摸不透明度不起作用。实际上，一旦单击同一标注内的关闭按钮，我需要隐藏自定义标注视图。不幸的是，单击关闭按钮时我的功能不会触发

`

const closeinforwindow=(e)=>{
  console.log("close button is clicked");
}
 

 <SafeAreaView style={{flex: 1}}>
      <View style={Interfacestyle.container}>
        <MapView mapType="satellite"   style={Interfacestyle.map}  region={getInitialState()}>
          {markers.map((marker, key) => {
              return(
                  <Marker
                    key={key}
                    coordinate={marker.latlng}
                    title={marker.title}
                    description={marker.description}
                    calloutOffset={{ x: -8, y: 10 }}
                    calloutAnchor={{ x: 0.5, y: 0.2 }}
                    
                   >
                    <Image source={{uri: marker.image}} style={{width: 42, height: 42,transform: [{ rotate : `${marker.heading} deg`}]}}/>
                    <Callout tooltip >
                      <View style={[Interfacestyle.info_windowwrapper]}>
                         <View style={[Interfacestyle.info_windowcontainer]}>
                            <View  style={[Interfacestyle.inforwwindowheader]} >
                                  <View style={{width:"92%",alignItems:'center'}}><Text style={[Interfacestyle.inforwwindowheadertext]}>{marker.name}</Text></View>
                                  <View style={[Interfacestyle.menuicon]}>
                                  <TouchableHighlight  onPress={(e)=>{closeinforwindow(e)}}>
                                       <Icon name="close" color="#fff" size={16} /> 
                                  </TouchableHighlight>
                                  </View>
                            </View>
                      </View>
                    </Callout>

                  </Marker>
                  
              )
          })} 

        </MapView>
   <View>
</SafeAreaView

`

请帮助我。

标签： react-nativereact-native-androidreact-native-maps

解决方案

这是一个旧线程，但它似乎仍然相关：https ://github.com/react-native-maps/react-native-maps/issues/226#issuecomment-220356079

Android 地图标注不支持其中的按钮，仅支持整个标注的 onPress 事件。这是 Android 上 Google 地图库的限制，react-native-maps 对此无能为力。

听起来您要么需要放弃功能，要么重构您的方法以将onPress事件用于Callout.

推荐阅读