Question

我正在尝试使用带有Websocket的angular-leaflet-directive，虽然我能够成功集成，但是标记的位置没有动态更新。但是如果我将鼠标移到地图上但是当lat-lng值改变时，地图的位置会更新。

以下是模块的代码片段。

    $scope.markers = {};
    angular.extend($scope, {
        bounds : $scope.bounds,
        center : {},
        kppaths : {},
        events: {
            markers:{
              enable: [ 'move' ]
            }
        }
    });


    $stomp.setDebug(function(args) {
        $log.info(args);
    });

    $scope.startWS = function() {

            var connectionHeaders = {};
            // Connect
            $stomp.connect("/kp-ws").then(function(frame){
            $log.info("connected to server")
            $stomp.send('/app/start', {});
            // Subscribe for message
            $scope.subscription = $stomp.subscribe('/topic/kp', function(
                    data, headers, res) {
                angular.forEach(data, function(k,v){
                    $scope.markers[k.markerId].lat = k.lat;
                    $scope.markers[k.markerId].lng = k.lng;
                });
            });
            });

    };

    $scope.stopWS = function() {
        $stomp.send('/app/stop', {});
        $scope.subscription.unsubscribe();
        $stomp.disconnect();
    };

    $scope.$on("leafletDirectiveMarker.move", function(event, args){
       $log.info(args.model.lat);
    });

} ]);

html文件

<div class="card-block">
            <leaflet bounds="bounds" geojson="geojson" lf-center="center"
                paths="kppaths" markers="markers" event-broadcast="events" width="100%" height="480px"></leaflet>
</div>

我是否遗漏了某些内容，请让我知道或建议如何解决此问题？

Answer 1

我发现的可能的解决方法是：

leafletData.getMap().then(function (map) {
   $timeout(function() {map.invalidateSize()});
});

基本上，一旦地图失效，它就会更新标记的位置。尽管不完美，但考虑到一些性能问题，该解决方法至少可以解决主要问题。

Angular Leaflet Directive不更新标记位置

1 个答案: