javascript - How to display leaflet map properly on NuxtJS - Stack Overflow

admin管理员组

文章数量:1402964

I'm using NuxtJS and I use the library 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/{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';

Vueponent('l-map', LMap);
Vueponent('l-tile-layer', LTileLayer);
Vueponent('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 :

I'm using NuxtJS and I use the library https://vue2-leafletlify.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/{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.ponent('l-map', LMap);
Vue.ponent('l-tile-layer', LTileLayer);
Vue.ponent('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 :

• javascript
• vue.js
• leaflet
• vue2leaflet

Share Improve this question Follow edited Feb 21, 2021 at 3:14 neubert 16.8k2626 gold badges135135 silver badges252252 bronze badges asked Feb 21, 2021 at 2:37 BernardBernard 16511 silver badge1111 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

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

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

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/{z}/{x}/{y}.png',
      attribution:
        '© <a href="http://osm/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: [],
      },

  }
}

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/{z}/{x}/{y}.png" />
      </l-map>
    </client-only>
</div>

data

data () {
  return {
    map: false
  }
}

mounted

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

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

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

本文标签： javascriptHow to display leaflet map properly on NuxtJSStack Overflow