使用 maxbounds 时传单地图保持无限移动

Question

我创建了一个 crs 传单地图，我正在尝试将其最大边界设置为 crs 图像的边界。当我添加 maxbounds 属性时，会出现三个传单事件，它们会无限触发，导致地图无限移动。 这些是事件：

leafletDirectiveMap.move
leafletDirectiveMap.movestart
leafletDirectiveMap.moveend

这是我的代码。我正在使用传单 angular 指令

  angular.module('pyvMap').controller('mainCtrl', [ '$scope', 'leafletData', 'leafletBoundsHelpers', function($scope, leafletData, leafletBoundsHelpers) {

var mapMinZoom = 2;
var mapMaxZoom = 6;
var maxBounds = leafletBoundsHelpers.createBoundsFromArray([[0,241.59375], [-132.65625, 0]]);

angular.extend($scope, {
  defaults: {
    maxZoom: mapMaxZoom,
    minZoom: mapMinZoom,
    zoomControl: false,
    crs: 'Simple',
    attributionControl: false,
    detectRetina: true,
    tileLayer: "http://d30jy4vw1d2n56.cloudfront.net/tiles/{z}/{x}/{y}.png",
    tileLayerOptions: {
      minZoom: mapMinZoom,
      maxZoom: mapMaxZoom,
      // bounds: maxBounds,
      opacity: 0.9,
      // reuseTiles: true,
      continuousWorld: true,
      noWrap: true,
      tileSize:256,
      crs: 'Simple',
      detectRetina: true,
    },
  },
  center: {
    zoom: 2
  },
  maxBounds: maxBounds
});}]);

HTML:

<leaflet  center="center"  maxBounds="maxBounds"  defaults="defaults"></leaflet>

谢谢！

Answer 1

根据需要将 width 和 height 属性添加到 <leaflet> 标签后，无论使用 Leaflet 版本 0.7.7 还是 1.2.0:

https://plnkr.co/edit/iqiz29Jmz2WOgaNeNZIv?p=preview

使用 maxbounds 时传单地图保持无限移动

Leaflet map keeps moving infinitely when using maxbounds

javascript

angularjs

leaflet

angular-leaflet-directive