1

親愛なるプログラマーの皆さん、

リーフレット ディレクティブでマップを作成しようとしています。ここでフィドルを見ることができます。
フィドル
上記のフィドルでは、マップをドラッグすると、マーカーが常に中央に表示されます。しかし、（スクロールを使用して）ズームイン/ズームアウトすると、マップがマウスの領域にズームされ、マーカーの座標が変更されます。

ズームイン/ズームアウトするときに、マップの中心にあるマーカーにマップをズームする (マーカー座標を変更しない) にはどうすればよいですか?

どんな助けでも大歓迎です:)

これは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
      }
    };
  });
}]);
4

1 に答える 1

0

これを開始フィドルとして試すことができます：

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>

現在、ユーザーはマウスでズームおよびドラッグすることはできず、ズーム コントロールのみを使用してマップを中央に配置することができます。

ここのリーフレットのドキュメントでは、 に設定scrollWheelZoomすると'center'、常にマップの現在の中心にズームすることができます (それが必要なはずです) が、これを plunkr で動作させることができませんでした。angular-leaflet がこの機能をサポートしていない可能性があります。

于 2015-12-11T11:07:20.680 に答える