传单地图正在加载部分图块答案

【问题标题】：leaflet map is loading partial tiles传单地图正在加载部分图块
【发布时间】：2016-09-01 16:00:36
【问题描述】：

Leaflet 正在加载部分图块。下面是截图：

下面是我的代码，我正在尝试使用 panTO() 函数将标记居中：

        $scope.plotMap = function(lat, lng) {
            var latlng = new L.LatLng(lat, lng);

            $scope.map = new L.Map('detailsmap', {
                center: latlng,
                zoom: 3}
            );

            var center = $scope.map.project(latlng);
            center = new L.point(center.x - 150, center.y - 100);
            var target = $scope.map.unproject(center);
            $scope. map.panTo(target);

            L.tileLayer(
                'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
                {
                attribution: '&copy; <a href="http://openstreetmap' +
                    '.org">OpenStreetMap</a> contributors',
                }
            ).addTo($scope.map);

            L.marker(latlng, {icon: new L.Icon.Default()}).addTo(
                $scope.map);
        };

【问题讨论】：

您可能处于这种情况：stackoverflow.com/questions/36246815/…
你说得对，我也遇到了同样的问题，invalidateSize() 已经解决了。
感谢您的反馈！请您将其写下来作为答案并自动接受，以便人们知道您的问题已解决？谢谢！

标签： angularjs leaflet openstreetmap

【解决方案1】：

调用 invalidateSize() 函数解决了这个问题。下面是代码sn-p：

    $scope.plotMap = function(lat, lng) {
        var latlng = new L.LatLng(lat, lng);

        $scope.map = new L.Map('detailsmap', {
            center: latlng,
            zoom: 3}
        );

        var center = $scope.map.project(latlng);
        center = new L.point(center.x - 150, center.y - 100);
        var target = $scope.map.unproject(center);
        $scope. map.panTo(target);

        L.tileLayer(
            'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
            {
            attribution: '&copy; <a href="http://openstreetmap' +
                '.org">OpenStreetMap</a> contributors',
            }
        ).addTo($scope.map);

        L.marker(latlng, {icon: new L.Icon.Default()}).addTo(
            $scope.map);
    };

    $scope.dispMap = function() {
        $scope.plotMap();
        $scope.map.invalidateSize();
    };

【讨论】：

invalidateSize 绝对有效。就我而言，我需要将调用封装在 setTimeout 函数中，并稍作延迟，因为在设置地图时页面绘制还没有完全完成。