0

Estoy trabajando un proyecto de rn con javascript y usando la libreria react-native-maps para renderizar un mapa, hice dos componentes, uno que renderiza el mapa y otro que va recibir el componente del mapa, pero quiero pasarle como props al componente del mapa los datos de la ubicación, alguien sabe como los puedo pasar?

Probé esta forma, la silueta del mapa si renderiza, pero en el mapa no logro ver nada:

(Componente que pasa los props)

    <View style={Styles.mapContainer}>
        <View style={Styles.map}>
            <HospitalMapRender
                markOrigin={{
                    longitude: 19.410274,
                    latitude: -99.272246
                }}
            />
        </View>
    </View>

(Componente que crea el mapa y debe recibir los props de la ubicación)

interface Props {
    markOrigin: {
        latitude: number
        longitude: number
    }
}

export const HospitalMapRender: React.FC<Props> = (props) => {
    const { markOrigin } = props
    const [destination, setDestination] = React.useState({
        latitude: 19.394095,
        longitude: -99.281383
    })

    return (
        <View>
            <MapView
                style={Styles.map}
                initialRegion={{
                    latitude: markOrigin.latitude,
                    longitude: markOrigin.longitude,
                    latitudeDelta: 0.006,
                    longitudeDelta: 0.006
                }}
            >
                <Marker coordinate={markOrigin} />
                <Marker coordinate={destination} />
                <MapViewDirections
                    origin={markOrigin}
                    destination={destination}
                    strokeColor="red"
                    strokeWidth={2}
                    apikey={GOOGLE_MAPS_KEY}
                />
            </MapView>
        </View>
    )
}

1 respuesta 1

0

Cambia el marker... especifícalo así amigo!

<Marker
      key={item.id}
      title={item.place_describe}
      coordinate={{
        latitude: item.ord_latitud,
        longitude: item.ord_longitud,
        latitudeDelta: 0.00432123,
        longitudeDelta: 0.00343213,
      }}
    >
      <View
        style={{
          height: 50,
          width: 50,
        }}
      >
        <MaterialCommunityIcons
          name={"map-marker-radius"}
          size={50}
          color={CST.colorPrm}
        />
        <Text>{item.place_describe}</Text>
      </View>
    </Marker>
2
  • Pulsa en editar y describe las modificaciones en el código. Lee Cómo responder y haz el recorrido de bienvenida para conocer el funcionamiento del sitio.
    – padaleiana
    el 4 mar. a las 10:25
  • ¿Puedes añadir una explicación de cómo este bloque de código responde a la pregunta?
    – Héctor M.
    el 4 mar. a las 23:30

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.