L-map，未正确显示，vue2leaflet 在 framework7 弹出窗口中答案

【问题标题】：L-map, not displayed correctly, vue2leaflet in a framework7 popupL-map，未正确显示，vue2leaflet 在 framework7 弹出窗口中
【发布时间】：2019-12-02 01:22:22
【问题描述】：

我有下一个弹出窗口

<f7-popup class="demo-popup" :opened="popupDetalle" @popup:closed="popupDetalle = false">
            <f7-page>
                <f7-navbar title="Editar servicio">
                <f7-nav-right>
                    <f7-link popup-close>Cerrar</f7-link>
                </f7-nav-right>
                </f7-navbar>
                <div id="app">
                   <l-map ref="mymap" :zoom="zoom" :center="center">
                      <l-tile-layer :url="url" :attribution="attribution"> 
                        </l-tile-layer>
                       <l-marker :lat-lng="marker.position"></l-marker>
                    </l-map>
                </div>
            </f7-page>
</f7-popup>

在我的脚本中：

<script>
import 'leaflet/dist/leaflet.css';
import { LMap, LTileLayer, LMarker, LPopup } from "vue2-leaflet";
export default {
    components:{
      LMap, 
      LTileLayer, 
      LMarker, 
      LPopup
     }
}
</script>

和css：

<style scoped>
    .appMap {
        width: 100%;
        height: 400px;
    }
</style>

和 main.js：

import L from 'leaflet'
import { Icon } from 'leaflet'
import 'leaflet/dist/leaflet.css'

delete L.Icon.Default.prototype._getIconUrl

L.Icon.Default.mergeOptions({
    iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
    iconUrl: require('leaflet/dist/images/marker-icon.png'),
    shadowUrl: require('leaflet/dist/images/marker-shadow.png')
})

但在视觉上它看起来像这样：

基本上我是在指导文档，导入css及其组件，指导https://korigan.github.io/Vue2Leaflet/#/quickstart.md

【问题讨论】：

见stackoverflow.com/questions/36246815/…

标签： vuejs2 leaflet

【解决方案1】：

如果您在地图显示后调整浏览器窗口的大小，我怀疑您会发现 Leaflet 会正确加载地图图块。

第一次创建地图时，它会被隐藏，因此 Leaflet 不会知道它有多大。显示弹出窗口后，您需要踢一下。 Leaflet 本身可以监视浏览器窗口的大小调整，但它对您的弹出窗口一无所知。

您已经在<l-map> 上获得了ref="mymap"，因此只需使用以下方法使大小无效：

this.$refs.map.mapObject.invalidateSize()

在弹出窗口显示后，您需要找到一个合适的位置来拨打电话。时机很关键，如果你过早调用它，那么尺寸仍然是错误的，它也无济于事。

最初您可能想要添加一个按钮并将invalidateSize 调用放在其点击处理程序中。显然这不是一个可接受的解决方案，但它可以让您看到调用 invalidateSize 的效果，确认这确实解决了无法加载图块的问题。

【讨论】：