角度传单指令缩放到地图中心的标记答案

【问题标题】：Angular leaflet directive zoom to marker on the center of the map角度传单指令缩放到地图中心的标记
【发布时间】：2015-12-10 07:30:01
【问题描述】：

亲爱的程序员们，

我尝试使用传单指令创建地图。你可以在这里看到小提琴。
fiddle
在上面的小提琴中，当我拖动地图时，标记将始终位于中心。但是当我放大/缩小（使用滚动）时，地图正在放大到我的鼠标区域，从而改变了我的标记的坐标。

当我放大/缩小时，我应该怎么做才能使地图缩放到地图中心的标记（并且不改变标记坐标）？

任何帮助表示赞赏:)

这是js代码：

var app = angular.module('demoapp', ['leaflet-directive']);

app.controller('DemoController', ['$scope', 'leafletData', function($scope, leafletData) {
  angular.extend($scope, {
    center: {
      lat: 51.505,
      lng: -0.09,
      zoom: 5
    },
    markers: {
      marker: {
        lat: 51.505,
        lng: -0.09,
        draggable: false
      }
    },
    defaults: {
      zoomControl: false
    }
  })

  $scope.$on('leafletDirectiveMap.move', function(event, args) {
    var map = args.leafletEvent.target;
    var center = map.getCenter();

    // Update the marker.
    $scope.markers = {
      marker: {
        draggable: false,
        lat: center.lat,
        lng: center.lng,
        draggable: false
      }
    };
  });
}]);

【问题讨论】：

标签： javascript angularjs zooming markers angular-leaflet-directive

【解决方案1】：

你可以试试这个作为开始fiddle:

var app = angular.module('demoapp', ['leaflet-directive']);

app.controller('DemoController', ['$scope', '$timeout', 'leafletData', function($scope, $timeout, leafletData) {
  angular.extend($scope, {
    center: {
      lat: 51.505,
      lng: -0.09,
      zoom: 5
    },
    markers: {
      marker: {
        lat: 51.505,
        lng: -0.09,
        draggable: false
      }
    },
    defaults: {
      dragging: false,
      scrollWheelZoom: false
    }
  });
}]);

并且在你的 html 中一定要传递默认值：

<body ng-controller="DemoController">
  <leaflet defaults="defaults" center="center" markers="markers" defaults="defaults"></leaflet>
</body>

现在用户不能用鼠标缩放和拖动，只能使用缩放控件使地图保持居中。

在传单文档here 他们说，您可以将scrollWheelZoom 设置为'center'，这将始终缩放到地图的当前中心（这应该是您想要的），但我无法得到这个在 plunkr 上工作。不知道为什么，也许 angular-leaflet 不支持这个功能？！

【讨论】：

谢谢。将 scrollWheelZoom 设置为“中心”正是我所需要的。我在我的应用程序上对其进行了测试，并且可以正常工作。不知道为什么它不能在 plunkr/jsfiddle 上运行..