Vue2-Leaflet с No-SSR вызывает окно не определена ошибка - PullRequest
Новая
       6

Vue2-Leaflet с No-SSR вызывает окно не определена ошибка

0 голосов
/ 31 октября 2018

Я пробовал кучу вещей сейчас. Я пробовал зависимость от листов-листов, я пытался написать свой собственный плагин и включить его. Однако все продолжает оканчиваться ошибкой «окно не определено».

Карта должна быть загружена только на клиенте.

Мой компонент Vue: 

 <template>
        <no-ssr>
            <l-map
                    id="map"
                    :zoom="zoom"
                    :min-zoom="3"
                    :center="center"
            >

            </l-map>
        </no-ssr>
 </template>

<script lang="ts">
    import Vue from 'vue';
    import {latLng, marker} from 'leaflet';
    import {ExploreItemType} from '~/components/explore/ExploreItem';
    import {Component} from "nuxt-property-decorator";

    @Component()
    export default class ExplorerMap extends Vue {

        url = 'https://api.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoia2dydWVuZWJlcmciLCJhIjoiY2puajJ3c3dmMGV1YzNxbDdwZ3Y5MXc0bCJ9.kuHo67NUkzqya1NtSjTYtw';
        attribution = 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>';
        zoom = 3;
        center = latLng(51.505, -0.09);
        drawCluster = true;

    }
</script>

Итак, я написал свой собственный плагин в plugins / vue-leaflet.ts 

import Vue from 'vue'
import Vue2Leaflet from 'vue2-leaflet'
import Vue2LeafletMarkerCluster from 'vue2-leaflet-markercluster';

Vue.component('l-circle', Vue2Leaflet.LCircle);
Vue.component('l-geo-json', Vue2Leaflet.LGeoJson);
Vue.component('l-icon-default', Vue2Leaflet.LIconDefault);
Vue.component('l-layer-group', Vue2Leaflet.LLayerGroup);
Vue.component('l-map', Vue2Leaflet.LMap);
Vue.component('l-marker', Vue2Leaflet.LMarker);
Vue.component('l-popup', Vue2Leaflet.LPopup);
Vue.component('l-tile-layer', Vue2Leaflet.LTileLayer);
Vue.component('l-tooltip', Vue2Leaflet.LTooltip);

И включил его в nuxt.config.js

{src: "~/plugins/vue-leaflet.ts", ssr: false}

Независимо от того, что я пробовал, я всегда получаю в окне не определенную ошибку. У меня нет идей.

Ответы [ 2 ]

0 голосов
/ 31 октября 2018

Благодаря подсказке от Альдарунда я получил это на работу: 

<template>

    <div>
        <no-ssr>
            <l-map
                    id="map"
                    :zoom="zoom"
                    :min-zoom="3"
                    :center="center"
            >
                <l-tile-layer :url="url" :attribution="attribution"/>
               ....
            </l-map>
        </no-ssr>
    </div>
</template>

<script lang="ts">
    const isBrowser = typeof window !== 'undefined';
    let leaflet;
    if (isBrowser) {
        leaflet = require('leaflet');
    }
    import Vue from 'vue';

    import {Component, Prop, Watch} from "nuxt-property-decorator";

    @Component({})
    export default class ExplorerMap extends Vue {

        url = 'https://api.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoia2dydWVuZWJlcmciLCJhIjoiY2puajJ3c3dmMGV1YzNxbDdwZ3Y5MXc0bCJ9.kuHo67NUkzqya1NtSjTYtw';
        attribution = 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>';
        zoom = 3;
        center;

        created() {
            if (isBrowser) {
                this.center = leaflet.latLng(51.505, -0.09);
            }
....
}
0 голосов
/ 31 октября 2018

Это потому, что в вашем компоненте вы делаете 

import {latLng, marker} from 'leaflet';

Который, вероятно, сделает некоторую проверку окна и сразу потерпит неудачу Таким образом, вам нужно импортировать его условно с if (process.client) check

...