如何在 NuxtJS 上正确显示 leaflet map

Question

I'm using NuxtJS and I use the library https://vue2-leaflet.netlify.app but the map doesn't show up properly. Here's my code, and a screen of the result:

map.vue:

<template>
  <div id="map-wrap" style="height: 100vh">
    <no-ssr>
      <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>
    </no-ssr>
  </div>
</template>

nuxt-leaflet.js:

import Vue from 'vue';
import { LMap, LTileLayer, LMarker } from 'vue2-leaflet';

Vue.component('l-map', LMap);
Vue.component('l-tile-layer', LTileLayer);
Vue.component('l-marker', LMarker);

nuxt.config.js:

  plugins: [
    {
      src: '~/plugins/nuxt-leaflet',
      mode: 'client',
    },

    {
      src: '~/plugins/vue-my-photos',
      mode: 'client',
    },
  ],

Here's a screen of the result:

Answer 1

Finally, I've found out that I had to include the css from leaflet:

  head() {
    return {
      link: [
        {
          rel: 'stylesheet',
          href: 'https://unpkg.com/leaflet@1.6.0/dist/leaflet.css',
        },
      ],
    }
  },

Answer 2

I am also using Vue Leaflet and it is working perfectly. Try changing the center props from array to object.

<l-map :zoom="13" :center="{
        lat: -7.280976,
        lng: 112.796844,
      }">

full code

    <div style="height: 350px; width: 100%">
      <client-only>
        <l-map
          ref="myMap"
          :zoom="zoom"
          :center="center"
          @update:center="centerUpdated"
          @click="handleClick"
        >
          <l-marker :lat-lng="regionCenter">
            <l-popup>Lokasi outlet</l-popup>
          </l-marker>
          <l-polyline
            :lat-lngs="polyline.latlngs"
            :color="polyline.color"
          ></l-polyline>
          <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
        </l-map>
      </client-only>
    </div>

data () {
  return {
      url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
      attribution:
        '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      zoom: 15,
      center: {
        lat: -7.280976,
        lng: 112.796844,
      },
      bounds: null,
      regionCenter: [-7.280976, 112.794944],
      address: {
        long: '',
        display: '',
      },
      polyline: {
        color: 'red',
        latlngs: [],
      },

  }
}

Answer 3

add leaflet css in nuxt.config.js as global css:

css: ['leaflet/dist/leaflet.css'],

Answer 4

in the Nuxt.js project sometimes your CSS doesn't load entirely and the Leaflet map cannot set width and height for that, it is better to hide the map, and when CSS and DOM load entirely then show the map.

<div v-if="map">
    <client-only>
      <l-map :zoom="13" :center="[selectedAddress.lat, selectedAddress.lng]">
        <l-tile-layer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png" />
      </l-map>
    </client-only>
</div>

data

data () {
  return {
    map: false
  }
}

mounted

mounted () {
  this.$nextTick(() => {
    setTimeout(() => {
      this.map = true
    }, 200)
  });
},