[英]Angular leaflet directive zoom to marker on the center of the map
亲爱的程序员,
我尝试使用传单指令创建地图。 您可以在这里看到小提琴。
小提琴
在上面的小提琴中,当我拖动地图时,标记将始终位于中心。 但是,当我放大/缩小(使用滚动条)时,地图正在缩放到鼠标的区域,从而更改了标记的坐标。
放大/缩小时,我应该怎么做才能使地图缩放到地图中心的标记(并且不更改标记坐标)?
任何帮助表示赞赏:)
这是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
}
};
});
}]);
您可以尝试作为一个小提琴 :
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不支持此功能?!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.