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

Question

我有下一个弹出窗口

<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

Answer 1

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

当地图第一次被创建时，它将被隐藏起来，这样传单就不会知道它有多大。一旦弹出窗口出现，你就需要给它一次机会。Leaflet本身可以观察浏览器窗口大小的调整，但它不知道任何关于弹出窗口的信息。

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

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

在弹出窗口显示后，您需要找到一个合适的位置来进行调用。时机很关键，如果你太快调用它，那么大小仍然是错误的，它不会有任何帮助。

最初，您可能希望添加一个按钮，并将invalidateSize调用放入其单击处理程序中。显然，这不是一个可接受的解决方案，但它会让你看到调用invalidateSize的效果，确认这确实解决了无法加载磁贴的问题。