Estoy tratando de encontrar coordenadas en el mapa cuando el usuario hace clic en él, pero no cuando hace doble clic para acercar. El objetivo es crear un marcador en este punto y recordarlo para más adelante.
Como estoy usando svelte, creo que debería usar un módulo svelte prefabricado, encontré svelte-leaflet que debería poder hacer el trabajo.
Descargué su proyecto de muestra y comencé a editar desde allí.
Entonces, solo quiero obtener un evento hasta ahora, así que creo una función en App.svelte
const on_map_click = (e) => { console.log('click') console.log(e) }Y agregue el controlador de eventos:
<div class="example" style="width: 100%; height: 100%;"> <LeafletMap bind:this={leafletMap} options={mapOptions} on:click={on_map_click}> <TileLayer url={tileUrl} options={tileLayerOptions} /> </LeafletMap> </div>Lamentablemente no recibo ningún evento.
Así que probé otro enfoque (no orientado a esbeltas):
onMount(() => { leafletMap.getMap().fitBounds([[60.9, -4.8], [45.5, 10.2]]); leafletMap.getMap().on('click', on_map_click) // <--- });Este enfoque funciona, pero si hago doble clic en él, aún activa el evento. Entonces creo que hay otra forma, más adaptada al caso de uso.
Por favor, hágame saber lo que estoy haciendo mal?
Hay una sección en los documentos https://ngyewch.github.io/svelte-leaflet/event-handling . De acuerdo con eso, debe establecer events en el componente que desea escuchar, por lo que
<LeafletMap ... events="{['click']}" on:click={on_map_click}> El objeto del evento será un CustomEvent con el evento original en el detalle
function on_map_click(event) { console.log(event.detail.originalEvent) }pero si hago doble clic todavía activa el evento
Creo que es un comportamiento normal que el evento de clic también se active cuando se hace doble clic. ¿Se debe establecer un marcador visible? ¿Tal vez esto podría hacerse agregando un botón que debe presionarse mientras se hace clic? ¿O usar el contextmenu con el botón derecho?
Como estoy usando svelte, creo que debería usar un módulo svelte prefabricado
No hay obligación de hacerlo. Puede ser útil usar una biblioteca esbelta especial, pero también es posible usar la biblioteca js directamente
Así es como podría hacerlo directamente con el leaflet instalado REPL
<script> import L from 'leaflet' import 'leaflet/dist/leaflet.css' function initMap(node) { const map = L.map(node).setView([51.505, -0.09], 13); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); L.marker([51.5, -0.09]).addTo(map) .bindPopup('A pretty CSS3 popup.<br> Easily customizable.') .openPopup(); map.on('click', (event) => console.log(event)) } </script> <div use:initMap></div> <style> div { height: 600px; } </style>