要将全屏按钮添加到我的传单 map 到nuxt中,我已经安装了leaflet.fullscreen包,并且我已经编辑了我的插件leaflet.js
,如下所示:
import Vue from "vue";
import { LMap, LTileLayer, LMarker, LPolyline } from "vue2-leaflet";
require("leaflet-routing-machine");
require("lrm-graphhopper");
require("leaflet.fullscreen");
所以我可以在我的主模板中使用它:
<template>
<div>
<section class="search__page">
<div id="map-wrap" class="map__wrapper"></div>
</section>
</div>
</template>
<script>
import Tmap from "@/utils/TripMap.js";
export default {
mounted() {
this.initTmap();
},
data() {
return {
mainMap: null,
},
methods: {
initTmap() {
this.mainMap = new Tmap();
this.mainMap.load();
}
}
}
</script>
我的类(class)看起来像这样:
export default class Tmap {
constructor() {
this.map = null;
}
load) {
this.map = L.map("map-wrap", {
fullscreenControl: true,
fullscreenControlOptions: {
position: "topleft"
}).setView([46.7227062, 2.5046503], 6);
L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
maxZoom: 18,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, ©TRIP'
}).addTo(this.map);
}
addMarkerOnClick() {
this.map.addEventListener("click", ev => {
L.marker(ev.latlng).addTo(this.map);
});
}
getBounds() {
return this.map.getBounds();
}
}
因此,在我的主要组件中,我不知道如何导入与此全屏插件关联的 css。我尝试过:
<style>
@import "~/node_modules/leaflet.fullscreen/Control.FullScreen.css";
</style>
这可行,但显然不是最好的方法。知道如何正确地做到这一点吗?
最佳答案
通过快速的网络研究,我想说你应该能够访问这样的样式:
@import "~leaflet/dist/leaflet.css";
当您在 nuxt.config.js 中注册全局样式时,应用程序将仅加载它一次。我认为由于 node_modules
路径,您的构建比正常情况花费了更多时间。
// nuxt.config.js
css: ['~/assets/styles/global.css'],
您还可以给出 nuxt resource loader尝试一下。
关于css - 使用 nuxt js 从插件文件中所需的节点模块导入 css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59773210/