如何在Vue2Leaflet中使用全屏幕传单

Question

有谁有关于如何将全屏幕传单与Vue2传单集成的示例吗？

我在组件中使用Vue2Leaflet (通过npm加载)，并将CDN链接添加到index.html中的全屏幕js。但是当全屏js加载时，它无法找到对传单的引用，因为它还没有加载。所以我不知道该怎么按顺序使用它们。

Answer 1

您需要使用this.$refs.mymap.mapObject访问map对象，并在mounted钩子中添加控件。

首先向ref元素添加一个<l-map />属性：

<l-map :zoom="zoom" :center="center" ref="mymap">
  ...
</l-map>

然后在mounted钩子中添加控件：

mounted() {
  const map = this.$refs.mymap.mapObject;
  map.addControl(new L.Control.Fullscreen());
}

参见此小提琴

如果你用webpack的话，就有点不一样了：

1)用npm install leaflet-fullscreen --save安装

2)将js和css文件导入main.js文件(应用程序入口点)或在index.html中使用<script>

import 'leaflet-fullscreen/dist/leaflet.fullscreen.css';
import 'leaflet-fullscreen/dist/Leaflet.fullscreen';

3)在组件中，使用window.L而不是L

mounted() {
  const map = this.$refs.mymap.mapObject;
  map.addControl(new window.L.Control.Fullscreen());
}

Answer 2

对于那些使用带有vue2传单的Nuxt的用户(并且不想使用插件，而是出于性能原因在本地导入插件)，您可以这样做：

npm安装单张-全屏幕

需要所需的文件，创建一个在地图加载时运行的方法。

         <l-map
                @ready="LoadFullscreen()"
                ref="myMap"
              >
        
        <script>
let LMap,
  LTileLayer,
  LMarker,
  LPopup,
  LIcon,
  LControlAttribution,
  LControlZoom,
if (process.client) {
  require("leaflet");
  ({
    LMap,
    LTileLayer,
    LMarker,
    LPopup,
    LIcon,
    LControlAttribution,
    LControlZoom,
  } = require("vue2-leaflet/dist/vue2-leaflet.min"));
  require("leaflet-fullscreen/dist/leaflet.fullscreen.css");
  require("leaflet-fullscreen/dist/Leaflet.fullscreen");
}
import "leaflet/dist/leaflet.css";

..。出口违约等等..。设置组件

methods: {
LoadFullscreen() {
  if (!process.server) {
    const map = this.$refs.listingsMap.mapObject;
    map.addControl(
      new window.L.Control.Fullscreen({
        position: "topright",
      })
    );
  }
},

},