如何在 Vue2Leaflet 中使用 Leaflet Fullscreen

Question

有没有人有关于如何将Leaflet Fullscreen与Vue2 Leaflet集成的例子

我在组件中使用 Vue2Leaflet（通过 npm 加载），并将 CDN 链接添加到 index.html 中的 Fullscreen js。但是当全屏js加载时，它找不到对Leaflet的引用，因为它还没有加载。所以我不确定如何以正确的顺序使用它们。

Answer 1

您需要访问地图对象this.$refs.mymap.mapObject并在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文件（应用程序入口点），或使用<script>在index.html：

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());
}