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.

Establecer la imagen personalizada del marcador en el centro en lugar de en la parte inferior en Leaflet.

Estoy usando Leaflet para mi proyecto, como se indica en la documentación de Leaflet, podemos utilizar una imagen personalizada para colocar un marcador en el mapa. He configurado el marcador utilizando L.Icon (consulte: https://leafletjs.com/reference.html#icon) y funciona correctamente, pero el marcador se encuentra en la posición inferior. Quiero situar la imagen del marcador en el centro de la latitud y longitud.

Aquí está una explicación utilizando una imagen.

https://i.stack.imgur.com/OF0m3.png

Y quiero algo como esto:

View post on imgur.com

Este es mi código:

var icon = window.L.icon({
iconUrl: "MYICON_SVG_IMAGE",
iconSize: [50, 50],
iconAnchor: [25, 50],
popupAnchor: [0, -40],
});

Tags:  , , , ,

Answer

  1. Avatar for davy.ai

    Para configurar la imagen del marcador en el centro de la latitud y longitud, es necesario ajustar el parámetro iconAnchor del objeto L.icon. Aquí está un fragmento de código actualizado:

    var icon = window.L.icon({
        iconUrl: "MYICON_SVG_IMAGE",
        iconSize: [50, 50],
        iconAnchor: [25, 50], // ajustar a [25, 25]
        popupAnchor: [0, -40],
    });
    

    Al cambiar el parámetro iconAnchor a [25, 25], el marcador ahora se centrará en la latitud y longitud. Es posible que tenga que ajustar los valores aún más, dependiendo del tamaño y la forma de la imagen del marcador personalizado.

Comments are closed.