传单 js 地图在页面加载时未完全显示答案

【问题标题】：leaflet js map not showing fully on page load传单 js 地图在页面加载时未完全显示
【发布时间】：2022-08-06 19:17:40
【问题描述】：

在加载页面加载时，我的传单地图无法完全加载，而是显示地图的一小部分。但是当我尝试调整屏幕大小时，地图完全显示为一个整体。我不明白为什么我还有在脚本中正确初始化了地图。这是我的代码库，可能做错了。我添加了必要的传单 js 和 CSS cdn 链接这是我的 HTML

<div class=\"row\" style=\"margin: 40px 5px;\">
    <div class=\"col-lg-12\">
        <div class=\"ms_heading\">
            <h3 class=\"text-white p-2\">properties Locations</h3>
        </div>
        <div id=\"map\"
            style=\"height: 400px; margin-top:5px;\">
        </div>
    </div>

这是我的脚本

$(document).ready(function () {

        //1. initialize leaflet map
        var center = [-0.421498116026705, 36.950147769312004];
        var propertiesmap = L.map(\'map\').setView(center, 10);

        propertiesmap.invalidateSize();

        var googleStreets = L.tileLayer(\'http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}\',{
            maxZoom: 10,
            subdomains:[\'mt0\',\'mt1\',\'mt2\',\'mt3\']
        });

        googleStreets.addTo(propertiesmap)

        var marker = L.marker([-0.421498116026705, 36.950147769312004]).addTo(propertiesmap);
                
    });

Works for me
@IvanSanchez 可能导致它无法完全加载到我身边的问题是什么
@Mehran 我删除但仍未完全加载
最可能的原因是您在此处发布的代码不是您在此处使用的代码。
@IvanSanchez 它仍然是一个..在大屏幕上地图没有显示，但在小屏幕上它可以完美运行

标签： jquery laravel leaflet

【解决方案1】：

检查正确加载的leaflet.css？我有类似的问题，现在修复了。

【讨论】：