0
697
Vistasel problema con el folleto y el folleto draw vue leaflet.draw.js? 20d6: 8 TypeError no detectado: no se pueden leer las propiedades de undefined (leyendo 'longitud')
mounted() { this.initMap(); }, methods: { initMap() { this.map = L.map('mapContainer').setView([48.856663, 2.351556], 12); this.tileLayer = L.tileLayer( "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}", { attribution: '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery (c) <a href="https://www.mapbox.com/">Mapbox</a>', maxZoom: 18, id: "mapbox/satellite-streets-v11", accessToken: "token", } ); this.tileLayer.addTo(this.map); var drawnItems = new L.FeatureGroup(); this.map.addLayer(drawnItems); var drawControl = new L.Control.Draw({ edit: { featureGroup: drawnItems } }); this.map.addControl(drawControl); this.map.on(L.Draw.Event.CREATED, function(event){ let layer = event.layer; console.log(`start ${layer}`); drawnItems.addLayer((layer)) }) }, }, }leaflet.draw.js? 20d6: 8 TypeError no detectado: no se pueden leer las propiedades de undefined (leyendo 'longitud')
Después de la primera interacción con el mapa, aparecen errores en la consola y ya no es posible dibujar formas
UPD: Cambiado a mapbox dibujar
2 Respuestas
Responde la pregunta0
Resolví este problema así. En lugar de Leaflet, use MapBox y MapBox draw funciona en Vue 3
0
Uso un código similar para dibujar un polígono en un mapa base y tengo un problema similar cuando uso Vue3 con folleto y dibujo de folleto. Después de dibujar un polígono, aparece un montón de errores en la consola, probablemente provocados por un evento de mouseover.
Uncaught TypeError: this._markers is undefined in leaflet-draw.js:162:18Todavía no he encontrado la causa raíz del problema, pero la razón podría ser el hecho de que el dibujo de folletos ya no está en línea con la Biblioteca base de folletos (solo una suposición). La última confirmación en Github es de 2018 y hay una larga lista de problemas y solicitudes de extracción abiertas, mientras que Leaflet se actualiza continuamente.
El problema también puede ocurrir cuando se usa la biblioteca en combinación con Vue.
¿Ha intentado crear la funcionalidad anterior usando Vanilla JS?