Leaflet.js 地图加载不正确

Question

我有一个弹出式容器，里面有传单地图。主页上的按钮激活获取用户位置并在弹出窗口上绘制地图的功能。然而，当弹出窗口出现时，地图只加载了一部分，并且没有关注我所在的位置。当我打开控制台时，它会自动调整并且非常完美。我看过有类似问题的帖子，但它们 link 到 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();
}

Leaflet.js 地图加载不正确

Leaflet.js map not loading properly

javascript

geolocation

leaflet