Отключить стандартный зум, добавить отслеживание mousedown/mouseup

Question

Отключить стандартный зум, добавить отслеживание mousedown/mouseup

Рейтинг: 0Ответов: 1Опубликовано: 27.03.2023

Подскажите пожалуйста, как отключить зум, когда пкм рисуется квадрат, при этом оставить рисование этого квадрата. Получить координаты, где начали нажимать пкм, и координаты, где отпустили пкм?

yandex-maps-api

Источник: Stack Overflow на русском

Answer 1

▲ 0Принят

Отключите поведение "rightMouseButtonMagnifier" и реализуйте собственную отрисовку прямоугольника на базе событий мыши.

var myMap;
ymaps.ready(init);

function init () {
    myMap = new ymaps.Map('map', {
        // Санкт-Петербург
        center: [59.93772, 30.313622],
        zoom: 10
    }, {
        searchControlProvider: 'yandex#search'
    });

myMap.behaviors.disable(['rightMouseButtonMagnifier'])
var coords = [], rectangle = null

myMap.events.add("mousedown", (e) => {
    switch (e.get('button')) {
    case 2:
        coords[0] = e.get('coords');
        coords[1] = e.get('coords');
        rectangle = new ymaps.Rectangle([coords[0], coords[1]]);
        myMap.geoObjects.add(rectangle);
        break;
    }
});

myMap.events.add("mousemove", (e) => {
    if (rectangle !== null) {
        coords[1] = e.get('coords');
        rectangle.geometry.setCoordinates(coords)
    }
});

myMap.geoObjects.events.add("mousemove", (e) => {
    if (rectangle !== null) {
        coords[1] = e.get('coords');
        rectangle.geometry.setCoordinates(coords)
    }
});

myMap.geoObjects.events.add("mouseup", (e) => {
    switch (e.get('button')) {
    case 2:
        console.log(coords);
        rectangle = null
        myMap.geoObjects.removeAll()
        break;
    }
});

}

<!DOCTYPE html>
<html>
<head>
    <title>Поведения карты</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    //Укажите свой API-ключ.
    <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;apikey=<ваш API-ключ>" type="text/javascript"></script>
    <script src="behaviors.js" type="text/javascript"></script>
    <style>
        html, body, #map {
            width: 100%; height: 600px; padding: 0; margin: 0;
        }
    </style>
</head>
<body>
<div id="map"></div>
</body>
</html>

Отключить стандартный зум, добавить отслеживание mousedown/mouseup

Ответы