Dynamically changing Leaflet map bounds in Angular?

问题

I'm using Angular-leaflet-directive. I have a menu where the user taps an option. Each time the user clicks an option the map is updated with two new markers and the bounds should be adjusted so these markers are both visible. The markers get updated but the bounds seem to work differently. The first time the user clicks something the bounds are updated, but they don't update for each time after that. This is the code which is called each time the user selects an option:

    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,
            }
        }
    }

This is my map initialization code:

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

This is the HTML where my map occurs:

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

It's not an issue with my data since the markers are updated fine. Any ideas? It seems weird that the bounds wouldn't function in the same way as the markers do.

Edit:

So the following code utilises the standard Leafleat.js functions and works:

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);
});

It would be nice if the angular directive implemented fitbounds in the same way.

来源：https://stackoverflow.com/questions/28102376/dynamically-changing-leaflet-map-bounds-in-angular

标签

angularjs

angularjs-directive

leaflet

angular-leaflet-directive