Question

我正在使用Angular-leaflet-directive。我有一个用户点击选项的菜单。每次用户单击选项时，都会使用两个新标记更新地图，并且应调整边界以使这些标记都可见。标记得到更新，但边界似乎有所不同。用户第一次点击某些内容时会更新边界，但在此之后每次都不会更新。这是每次用户选择选项时调用的代码：

    var updateMap = function() {
        setDirections();

        $scope.bounds = leafletBoundsHelpers.createBoundsFromArray([
            [$scope.thisPractice.end.k, $scope.thisPractice.end.D],
            [$scope.thisPractice.start.k, $scope.thisPractice.start.D]
        ]);

        $scope.markers = {
            end: {
                title: "Destination",
                lat: $scope.thisPractice.end.k,
                lng: $scope.thisPractice.end.D,
                focus: true,
                icon: local_icons.markerRed
            },
            start: {
                title: "Start",
                lat: $scope.thisPractice.start.k,
                lng: $scope.thisPractice.start.D,
            }
        }
    }

这是我的地图初始化代码：

// Initialize the map
    angular.extend($scope, {
        center: {},
        bounds: {},
        paths: {},
        markers: {},
        scrollWheelZoom: false,
        layers: {
            baselayers: {
                googleRoadmap: {
                    name: 'Google Streets',
                    layerType: 'ROADMAP',
                    type: 'google'
                }
            }
        }
    });

这是我的地图发生的HTML：

<div id="map_canvas">
    <leaflet id="leaflet_map" bounds="bounds" center="center" markers="markers" paths="paths" height="300px" width="100%" layers="layers"></leaflet>
</div>

由于标记更新正常，因此我的数据不是问题。有任何想法吗？边界不会像标记那样起作用，这似乎很奇怪。

编辑：

因此，以下代码使用标准的Leafleat.js函数并运行：

var bounds = L.latLngBounds([$scope.thisPractice.end.k, $scope.thisPractice.end.D], [$scope.thisPractice.start.k, $scope.thisPractice.start.D])
leafletData.getMap().then(function(map) {
        map.fitBounds(bounds);
});

如果angular指令以相同的方式实现了fitbounds将会很好。

动态改变Angular中的Leaflet地图边界？

0 个答案: