es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cambiar o mover la posición del pop-up en react-leaflet.

26 Jul, 2023 Programación

Mi ventana emergente del marcador se superpone, lo que la hace parcialmente visible. Necesito mover la ventana emergente arriba.

enter image description here

enter image description here

Código:

<marker draggable="{draggable}" eventhandlers="{eventHandlers}" position="{position}" ref="{markerRef}">
  <popup>
    <span onclick="{toggleDraggable}">
      {draggable && <button>Click Here</button>}
    </span>
  </popup>
</marker>

También intenté acceder al componente de la ventana emergente, pero eso rompe la ventana emergente.

.leaflet-popup-content-wrapper {
    padding: 1px;
    text-align: left;
    border-radius: 12px;
    margin-bottom: 30px;
}

enter image description here

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para mover el popup sobre el marcador, puedes agregar “offset={[0, -30]}” al componente Popup. Esto desplazará el popup 30 píxeles por encima del marcador.

    El código modificado se vería así:

    <marker draggable="{draggable}" eventhandlers="{eventHandlers}" position="{position}" ref="{markerRef}">
  <popup offset="{[0," -30]}="">
    <span onclick="{toggleDraggable}">
      {draggable && <button>Haga clic aquí</button>}
    </span>
  </popup>
</marker>

    Ajusta el valor del desplazamiento en el eje y según sea necesario para posicionar el popup donde lo desees.

Comments are closed.