HTML:
<ya-map ya-zoom="10" ya-center="[37.611619,55.819543]" ya-after-init="afterInit($target)"></ya-map> <ya-dragger id="marker" ya-event-start="onStart($event)" ya-event-move="onMove($event)" ya-event-stop="onStop($event)" ></ya-dragger>
CSS
#marker { background-image: url('img/pin_food.png'); width: 33px; height: 36px; position: absolute; }
javascript:
var markerOffset, markerPosition, map; $scope.afterInit=function(target){ map=target; }; var marker = document.getElementById('marker'); $scope.onStart=function(event) { var position = event.get('position'); // Сохраняем смещение маркера относительно точки начала драга. markerOffset = [ position[0] - marker.offsetLeft, position[1] - marker.offsetTop ]; markerPosition = [ position[0] - markerOffset[0], position[1] - markerOffset[1] ]; applyMarkerPosition(); }; $scope.onMove=function(event) { applyDelta(event); }; $scope.onStop=function(event) { applyDelta(event); markerPosition[0] += markerOffset[0]; markerPosition[1] += markerOffset[1]; // Переводим координаты страницы в глобальные пиксельные координаты. var markerGlobalPosition = map.converter.pageToGlobal(markerPosition), // Получаем центр карты в глобальных пиксельных координатах. mapGlobalPixelCenter = map.getGlobalPixelCenter(), // Получением размер контейнера карты на странице. mapContainerSize = map.container.getSize(), mapContainerHalfSize = [mapContainerSize[0] / 2, mapContainerSize[1] / 2], // Вычисляем границы карты в глобальных пиксельных координатах. mapGlobalPixelBounds = [ [mapGlobalPixelCenter[0] - mapContainerHalfSize[0], mapGlobalPixelCenter[1] - mapContainerHalfSize[1]], [mapGlobalPixelCenter[0] + mapContainerHalfSize[0], mapGlobalPixelCenter[1] + mapContainerHalfSize[1]] ]; // Проверяем, что завершение работы драггера произошло в видимой области карты. if (containsPoint(mapGlobalPixelBounds, markerGlobalPosition)) { // Теперь переводим глобальные пиксельные координаты в геокоординаты с учетом текущего уровня масштабирования карты. var geoPosition = map.options.get('projection').fromGlobalPixels(markerGlobalPosition, map.getZoom()); alert(geoPosition.join(' ')); } }; function applyDelta (event) { // Поле 'delta' содержит разницу между положениями текущего и предыдущего события драггера. var delta = event.get('delta'); markerPosition[0] += delta[0]; markerPosition[1] += delta[1]; applyMarkerPosition(); } function applyMarkerPosition () { marker.style.left=markerPosition[0]+'px'; marker.style.top=markerPosition[1]+'px'; } function containsPoint (bounds, point) { return point[0] >= bounds[0][0] && point[0] <= bounds[1][0] && point[1] >= bounds[0][1] && point[1] <= bounds[1][1]; }