我正在使用VueJS和Leaflet来显示具有特殊本地化的 Map . 我已经在index.html中添加了css传单,如文档中所述 .
link rel =“stylesheet”href =“https://unpkg.com/leaflet@1.2.0/dist/leaflet.css”>
但我只有 Map 的一部分 . 我必须改变屏幕的大小以使所有 Map 都带有标记 .
这是我实现 Map 的地方(iMap.vue)
<template>
<div id="professionnel">
<b-row>
<b-tabs>
<b-tab title="A" >
<div>
<b-col class="col-12">
<div>Où nous joindre</div>
</b-col>
</div>
</b-tab>
<b-tab title="B">
<div class="tab-content-active" >
<b-col class="col-6">
<div>heure</div>
</b-col>
<b-col class="col-6 data_map">
<iMap1></iMap>
</b-col>
</div>
</b-tab>
</tabs>
</b-row>
</div>
</template>
<script>
import iMap1 from './iMap1'
export default {
name: 'professionnel',
components: {
iMap1
},
data() {
return {}
}
</script>
这是Map(iMap.vue)的vue
<template>
<div id="imap1" class="map" >
</div>
</template>
<script>
import leaflet from 'leaflet'
export default {
name: 'imap1',
components: {
leaflet
},
data() {
return {
professionnel: {},
map1: null,
tileLayer: null,
}
},
methods: {
initMap() {
this.map1 = L.map('imap1').setView([47.413220, -1.219482], 12)
this.tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
//'https://cartodb-basemaps-{s}.global.ssl.fastly.net/rastertiles/voyager/{z}/{x}/{y}.png',
{
maxZoom: 18,
center: [47.413220, -1.219482],
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, © <a href="https://carto.com/attribution">CARTO</a>',
}).addTo(this.map1)
L.marker([47.413220, -1.219482]).addTo(this.map1).bindPopup('name')
.openPopup()
this.map1.invalidateSize()
})
},
},
created () {
this.initMap()
}
}
</script>
1 回答
使用mounted生命周期钩子而不是created .
created
通常是订阅一些数据/启动一些异步进程,而mounted
则是在你的组件的DOM准备就绪时(但不一定在页面IIRC中引入) .然后,如Data-toggle tab does not download Leaflet map中所述,您必须使用invalidateSize after 打开包含Map容器的Tab,即您必须收听一个表示您的用户已打开Tab的事件 .
对于Bootstrap-Vue,您有
<b-tabs>
的"input"事件,但仅在用户单击Tab时发出信号 . 但后者仍未开放 . 因此,在调用invalidateSize
之前,您必须给它一个短暂的延迟(通常使用setTimeout):