Angular 传单指令缩放到地图中心的标记
Angular leaflet directive zoom to marker on the center of the map
亲爱的程序员们,
我尝试使用传单指令创建地图。你可以在这里看到fiddle。
fiddle
在上面的 fiddle 中,当我拖动地图时,标记将始终位于中心。但是当我缩放 in/out(使用滚动)时,地图正在缩放到我的鼠标区域,从而改变了我的标记的坐标。
当我缩放 in/out 时,我应该怎么做才能使地图缩放到地图中心的标记(而不更改标记坐标)?
感谢任何帮助:)
这是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
}
};
});
}]);
您可以先试试这个 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 不支持此功能?!
亲爱的程序员们,
我尝试使用传单指令创建地图。你可以在这里看到fiddle。
fiddle
在上面的 fiddle 中,当我拖动地图时,标记将始终位于中心。但是当我缩放 in/out(使用滚动)时,地图正在缩放到我的鼠标区域,从而改变了我的标记的坐标。
当我缩放 in/out 时,我应该怎么做才能使地图缩放到地图中心的标记(而不更改标记坐标)?
感谢任何帮助:)
这是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
}
};
});
}]);
您可以先试试这个 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 不支持此功能?!