如何在 NuxtJS 上正确显示传单地图

问题描述

我正在使用 NuxtJS 并使用库 https://vue2-leaflet.netlify.app，但地图无法正确显示。这是我的代码和结果屏幕：

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',],

这是结果的屏幕：

解决方法

最后，我发现我必须包含传单中的 css :

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

,

我也在使用 Vue Leaflet，它运行良好。尝试将 center 道具从数组更改为对象。

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

完整代码

    <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,bounds: null,regionCenter: [-7.280976,112.794944],address: {
        long: '',display: '',polyline: {
        color: 'red',latlngs: [],}
}