- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我目前正在创建一个使用 vue-leaflet 的 vue3 cli 应用程序(vue3兼容版本)
在我的本地开发环境中一切正常,但是一旦构建了我的应用程序, map 就不会加载,即使我像这样调整大小 thread解释得很好。
我尝试使用 leafletObject.invalidateSize()
方法,但没有任何改变。
我的 map 是第一次调用时使用 v-if 调用的组件(在 ListView 和 map 之间切换)和初始化后的 v-show
<transition name="fade" mode="out-in">
<Map v-if="mapInit"
v-show="(!mobileView && !listing) ||
(mobileView && !listing && !getFiltresMobile)"
:liste="getFilteredList"/>
</transition>
这是我使用
npm run serve
时在我的开发版本上得到的结果
<template>
<div id="map">
<l-map v-if="!loading" :style="mapHeight" :zoom="zoom" :center="centerValue" :options="{tap : false}" ref="map">
<l-tile-layer :url="url"></l-tile-layer>
<l-marker v-for="(marqueur) in mapData" :key="marqueur.id" :visible="isFiltered(marqueur)" :lat-lng="marqueur.latLng" :ref="setMarkerRefs" @click="markerClick(marqueur.latLng)">
<l-icon :icon-url="checkActive(marqueur.latLng)" :icon-size="[30 , 37]" :popup-anchor="popupUpPosition" :icon-anchor="[15, 37]"/>
<l-popup :options="popupoptions">
<MarqueurPopup :contenu="marqueur"/>
</l-popup>
</l-marker>
</l-map>
<Loader v-if="loading"/>
</div>
</template>
JS
<script>
import "leaflet/dist/leaflet.css"
import { LMap , LTileLayer , LPopup , LMarker , LIcon } from "@vue-leaflet/vue-leaflet";
export default {
name: "Map",
props : ['liste'],
components: {
Loader,
MarqueurPopup,
LMap,
LTileLayer,
LMarker,
LPopup,
LIcon,
},
data() {
return {
url: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png',
zoom: 13,
mapData : [],
markerRefs : [],
markerRefsDef : [],
popupoptions : {
maxWidth : 1000,
minWidth : 300,
closeButton : false,
}
};
},
beforeMount() {
this.initMap()
},
mounted() {
setTimeout( () => {
console.log(this.$refs.map.leafletObject) // returns the leaflet map objects
this.$refs.map.leafletObject.invalidateSize(); // no error but does nothing
}, 1000);
},
computed : {
popupUpPosition() {
if (window.innerWidth < 768) {
return [0, 74]
}
return [0, -37]
},
mapHeight() {
let colonneValue = window.innerWidth / 12;
if (colonneValue < 115) {
colonneValue = 115
}
let height = window.innerHeight - colonneValue;
return {height : height+'px'}
},
},
methods : {
async initMap() {
this.$store.commit('changeLoading' , true);
this.mapData = []
this.mapData = this.getFilteredList
this.$store.commit('changeLoading' , false);
},
}
}
</script>
有没有办法检查
invalidateSize()
方法触发器?我的 console.log 没有错误,但没有任何变化,所以它可能不会触发该方法?
最佳答案
相反,Leaflet CSS 看起来像是错误地加载到了您的产品包中:图 block 被打乱了,没有缩放和属性控制。
关于javascript - Vue传单在构建应用程序时不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70563401/
今天有小伙伴给我留言问到,try{...}catch(){...}是什么意思?它用来干什么? 简单的说 他们是用来捕获异常的 下面我们通过一个例子来详细讲解下
我正在努力提高网站的可访问性,但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接,因
说现在是 6 点,我有一个 Timer 并在 10 点安排了一个 TimerTask。之后,System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
就目前而言,这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
我就废话不多说了,大家还是直接看代码吧~ ? 1
Maven系列1 1.什么是Maven? Maven是一个项目管理工具,它包含了一个对象模型。一组标准集合,一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。 核心功能 Mav
我是一名优秀的程序员,十分优秀!