Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Функция как в картах Гугл и Яндекс (https://javascript.ru/forum/misc/82826-funkciya-kak-v-kartakh-gugl-i-yandeks.html)

Сергей Ракипов 13.07.2021 11:48

Функция как в картах Гугл и Яндекс
 
Я не знаю как правильно называется это функция, но смысл ее заключается в том что когда зажимаешь клик на карте то карту можно перемешать в любое направление.

И вот нужно сделать так что бы фоновая картинка тоже меняла свою позицию в зависимости от того куда я ее перемещаю с помощью зажатого клика.
Возможно есть какие то готовые библиотеки или решение не такое сложное как я думаю, прошу помощи.

Возможно лучше сделать что бы картинка была не фоне а просто картинкой, я не знаю.

<!doctype html>
<html lang="ru">
<head>
	<meta charset="utf-8">
	<title>index</title>
    <style>
        body{
            font-family: 'Courier New', Courier, monospace;
            font-size: 16px;;
        }
        .blok{
            max-width: 1200px;
            margin: 0 auto;
            display:flex;
            flex-direction: column;
            align-items: center;
        }
        .podpis{
            display: block;
        }
        .fertezj{
            width: 1000px;
            height: 600px;
            background-image: url(https://rakipov.ru/files/fon3.png);
            background-repeat: no-repeat;
            background-position: center;
            cursor: crosshair;
            -webkit-box-shadow: 0px 0px 16px 6px rgba(34, 60, 80, 0.6) inset;
            -moz-box-shadow: 0px 0px 16px 6px rgba(34, 60, 80, 0.6) inset;
            box-shadow: 0px 0px 16px 6px rgba(34, 60, 80, 0.6) inset;
            border: 4px solid rgba(34, 60, 80, 0.9);
        }
    </style>
</head>

<body>
    <div class="blok">
        <p class="podpis">
            Размер блока 1000*600<br> 
            Размер фоновое изображение 2000*2000
        </p>
        <div class="fertezj"></div>
    </div>
</body>
</html>

рони 13.07.2021 14:41

Сергей Ракипов,
https://javascript.ru/forum/dom-wind...tml#post504886

Сергей Ракипов 14.07.2021 07:11

рони,
Спасибо это интересная функция я сохранил.

Но мне нужно не то.
Я не знаю как можно объяснить.
Вот карты https://yandex.ru/maps/54/yekaterinb...56.851369&z=12
И если один раз кликнуть и зажать то можно перетаскивать эту карту.

рони 14.07.2021 10:37

Цитата:

Сообщение от Сергей Ракипов
можно перетаскивать эту карту.

код выше позволяет это сделать ... сами, либо ждите.

Сергей Ракипов 14.07.2021 11:15

Цитата:

Сообщение от рони (Сообщение 538646)
код выше позволяет это сделать ... сами, либо ждите.

Спасибо у меня не получатся сообразить как из этого кода сделать то что мне нужно

рони 14.07.2021 15:16

просмотр перетаскиванием
 
Сергей Ракипов,

<!doctype html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <title>index</title>
    <style>
        body{
            font-family: 'Courier New', Courier, monospace;
            font-size: 16px;;
        }
        .blok{
            max-width: 1200px;
            margin: 0 auto;
            display:flex;
            flex-direction: column;
            align-items: center;
        }
        .podpis{
            display: block;
        }
        .fertezj{
            width: 500px;
            height: 300px;
            cursor: crosshair;
            overflow: hidden;
            -webkit-box-shadow: 0px 0px 16px 6px rgba(34, 60, 80, 0.6) inset;
            -moz-box-shadow: 0px 0px 16px 6px rgba(34, 60, 80, 0.6) inset;
            box-shadow: 0px 0px 16px 6px rgba(34, 60, 80, 0.6) inset;
            border: 4px solid rgba(34, 60, 80, 0.9);
            touch-action :none;
        }
        .fertezjХ img{
            width: 2000px;
            height: 2000px;
        }

    </style>
</head>

<body>
    <div class="blok">
        <p class="podpis">
            Размер блока 500*300<br>
            Размер фоновое изображение 2000*2000
        </p>
        <div class="fertezj"><img src="https://rakipov.ru/files/fon3.png" alt=""></div>
    </div>
<script>
   document.addEventListener( "DOMContentLoaded" , function() {

    document.querySelectorAll('.fertezj').forEach(el => {
    let _startX, _startY, _scrollLeft, _scrollTop;


    const pointerHandler = (event) => {
        const { screenX, screenY } = event;

        if(event.type === "pointerdown") {
            document.addEventListener("pointermove", pointerHandler);
            document.addEventListener("pointerup", pointerHandler);

            _startX = screenX;
            _startY = screenY;

            _scrollLeft = el.scrollLeft;
            _scrollTop = el.scrollTop;
        }

        if(event.type === "pointerup") {
            document.removeEventListener("pointermove", pointerHandler);
            document.removeEventListener("pointerup", pointerHandler);
        }

        if(event.type === "pointermove") {
            const dx = (screenX - _startX);
            const dy = (screenY - _startY);

            el.scrollTo(
                _scrollLeft - dx,
                _scrollTop - dy
            );
        }

        event.preventDefault();
    }

    el.addEventListener("pointerdown", pointerHandler);
    el.querySelector("img").addEventListener("load", _ => el.scrollTo(
                700,
                750
            ))
    })

        });
</script>
</body>
</html>

Сергей Ракипов 16.07.2021 06:48

рони,
Как всегда признателен, большое спасибо за помощь.

Скажите а что это часть кода значит

el.addEventListener( "pointerdown", pointerHandler );
                el.querySelector( "img" ).addEventListener( "load", _ => el.scrollTo(
                    700,
                    750
                ) )
            } )

Сергей Ракипов 16.07.2021 07:09

И еще сейчас проверил на мобильной телефоне. В моей голове зажатый клик и зажатый палец на экране это одно и тоже.

Но на телефоне не работает, но то есть как не работает, вроде картинку двигает но делает это плохо. Вот загрузил себе на сайт.

https://rakipov.ru/testik/map/

рони 16.07.2021 08:32

Цитата:

Сообщение от Сергей Ракипов
что это часть кода значит

пытка вывести картинку по её центру)))

voraa 16.07.2021 08:43

Цитата:

Сообщение от Сергей Ракипов
Но на телефоне не работает, но то есть как не работает, вроде картинку двигает но делает это плохо.

Для того, что бы срабатывало на сенсорных экранах, добавить в CSS после строки 29

touch-action :none;


Часовой пояс GMT +3, время: 03:30.