Estoy tratando de representar un mapa de OpenStreet con vue-leaflet. Pero me enfrento a un problema de renderizado incompleto. El mapa no se muestra con vista completa, sino que se carga parcialmente y no secuencialmente.
ingrese la descripción de la imagen aquí
Aquí está mi código
<template> <l-map v-show="loadingMap" :zoom="zoom" :center="center" :options="{ zoomControl: false }" > <l-tile-layer :url="url"></l-tile-layer> </l-map> </template>Encontré en algunas respuestas de StackOverflow, se sugiere importar leaflet.css y agregué leaflet.css en el archivo main.js. (para el ejemplo de sandbox, está en index.html), pero aún así, no funciona
¿Cómo puedo ver el mapa completo y con una vista de mapa real (no cargado parcialmente como ahora)?
Enlace de Codesandbox: https://codesandbox.io/s/silent-glade-1yqe8?file=/src/App.vue:31-212
Te falta el estilo css del folleto. Póngalo en su componente main.js o Vue.
import 'leaflet/dist/leaflet.css'; Luego agrega algo de estilo para #app
#app { height: 500px; width: 100%; }para los desarrolladores de vue.js y nuxt.js, probablemente se deba al uso de v-show o v-if, pero no se preocupe, lo único que tiene que hacer es usar una etiqueta de solo cliente como esta:
<client-only> <div v-show="someVariable" id="vShowOrVIfExample"> <div id="map-wrap" style="height: 100vh"> <l-map :zoom=13 :center="[55.9464418,8.1277591]"> <l-tile-layer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"></l-tile-layer> <l-marker :lat-lng="[55.9464418,8.1277591]"></l-marker> </l-map> </div> </div> </client-only>