Leaflet.js地图无法正常加载

Question

我有一个弹出式容器，里面有一张传单地图。主页面上的一个按钮激活了获取用户位置的功能，并在弹出窗口中绘制地图。然而当弹出窗口显示出来的时候，地图只加载了一部分，并没有聚焦在我所在的位置上。当我打开控制台的时候，它就会自动调整，很完美。我看到过类似问题的帖子，但他们链接到的github页面已经不存在了。

这是我的地理位置文件

function getLocation() {
    navigator.geolocation.getCurrentPosition(position => {
        let latitude = position.coords.latitude;
        let longitude = position.coords.longitude;

        var map = L.map('map').setView([latitude, longitude], 12);

        L.tileLayer('https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=sJdX2R69yUO7n4qEW4gl', {
            attribution: '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>' ,
        }).addTo(map);
        console.log(latitude, longitude);
}, error => {
    console.log(error.code);
},{
    enableHighAccuracy: true
});
}

而这是正在绘制的地图

<div class="form-popup" id="hackContainer">
                <div id="warning"></div>
                <script src="js/geolocation.js"></script>
                <div id="map"></div>

这就是触发该功能的按钮

<button type="button" class="btn btn-dark" onclick="getLocation()">Give Location</button>

Answer 1

你必须调用 map.invalidateSize();，以重新渲染地图大小。

navigator.geolocation.getCurrentPosition(position => {
        let latitude = position.coords.latitude;
        let longitude = position.coords.longitude;

        var map = L.map('map').setView([latitude, longitude], 12);

        L.tileLayer('https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=sJdX2R69yUO7n4qEW4gl', {
            attribution: '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>' ,
        }).addTo(map);
        console.log(latitude, longitude);
        map.invalidateSize();
}