Necesito información sobre herramientas personalizada con un fondo semitransparente que se superponga al mapa.
Entonces, en común, dibujamos primero MapView. Después de presionar el marcador en la parte superior de MapView, dibujamos la superposición (backgroundColor: "# 00000033"), en la parte superior dibuja información sobre herramientas e imagen sobre la posición del marcador para simular el resaltado. Y ahora necesito obtener la posición absoluta del marcador en la pantalla para dibujar mi imagen sobre él. Hay un point de apoyo en onPress nativeEvent con respecto a los documentos, pero no lo tengo en mi evento real y no sé si eso es lo que necesito.
{ "action": "marker-press", "coordinate": { "latitude": -15.3469687, "longitude": 37.100195 }, "id": "unknown", "target": 295 }¿Hay alguna manera de obtener la posición del marcador en la pantalla?
Sí, puede usar el método de measureInWindow en ventana en la referencia del componente personalizado. Si su componente personalizado no tiene este método disponible, puede envolverlo en una Vista y usar el método en eso.
Ejemplo:
const markerRef = useRef(); const [markerPosition, setMarkerPosition] = useState({}); const measureMarker = () => { markerRef.current?.measureInWindow((x, y, width, height) => { const { width: screenWidth, height: screenHeight } = Dimensions.get('screen'); // if any non-zero, on-screen values, save measurements if (!(x || y || width || height)) return; if (x > screenWidth || y > screenHeight) return; setMarkerPosition({x, y, width, height}); } }; ... return ( <View ref={markerRef} onLayout={measureMarker}> <CustomMarker ... ); Consulte los documentos de MeasureInWindow para obtener más información. La measure también funcionaría con el propósito de obtener la posición en pantalla.
Tenga en cuenta que estas devoluciones de llamada no funcionarán hasta que se complete el diseño nativo.