Vuejs2 L-map，未正确显示，Vue2传单在framework7弹出窗口中

我有下一个弹出窗口

<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>

但从视觉上看，它是这样的：

---

基本上我是以文档为指导的，css及其组件是导入的，guide

我怀疑如果在地图显示后调整浏览器窗口的大小，您会发现传单正确加载了地图分幅

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

您已经在

上找到了

ref=“mymap”

，因此只需使用以下方法使尺寸无效即可：

this.$refs.map.mapObject.invalidateSize（）

在弹出窗口显示后，您需要找到一个合适的位置拨打该电话。时机很关键，如果你叫得太早，那么尺寸仍然是错误的，也不会有帮助

---

最初，您可能希望添加一个按钮，并将

invalidateSize

调用放入其单击处理程序中。显然，这不是一个可接受的解决方案，但它将允许您查看调用

invalidateSize

的效果，确认这确实解决了未加载分幅的问题。

如果在显示地图后调整浏览器窗口的大小，您可能会发现传单正确加载地图分幅

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

您已经在

上找到了

ref=“mymap”

，因此只需使用以下方法使尺寸无效即可：

this.$refs.map.mapObject.invalidateSize（）

在弹出窗口显示后，您需要找到一个合适的位置拨打该电话。时机很关键，如果你叫得太早，那么尺寸仍然是错误的，也不会有帮助

最初，您可能希望添加一个按钮，并将

invalidateSize

调用放入其单击处理程序中。显然，这不是一个可接受的解决方案，但它将允许您查看调用

invalidateSize

的效果，确认这确实解决了未加载磁贴的问题。

请参阅

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

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

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')
})