2

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

    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，那就太好了。

4

0 回答 0