Форум программистов, компьютерный форум, киберфорум
JavaScript: API
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
 Аватар для NeXan87
4 / 4 / 0
Регистрация: 05.01.2015
Сообщений: 33
Яндекс Карты API

Как получить данные метки в "input" при клике на карту?

23.12.2020, 18:49. Показов 2567. Ответов 0

Студворк — интернет-сервис помощи студентам
Всем привет! В программировании я не очень, поэтому с трудом пополам написал такой код для создания метки на карте и передачи ее координат, адреса и масштаба в поле "input". И затормозил на нескольких задачах. Поэтому решил обратиться за помощью к гуру. Собственно, код:
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
ymaps.ready(init);        
function init() {
    var myMap = new ymaps.Map("map", {
        center: [59.93840592010904,30.316897968261596],
        zoom: 12,
        controls: ['zoomControl', 'fullscreenControl', 'geolocationControl',
            new ymaps.control.SearchControl({
                options: {
                    size: 'large',
                    provider: 'yandex#search'
                }
            })]
    });
    
    /* Начальный адрес метки */
    var address = '59.93840592010904,30.316897968261596';
    
    ymaps.geocode(address).then(function(res) {
        var coord = res.geoObjects.get(0).geometry.getCoordinates();
        
        var myPlacemark = new ymaps.Placemark(coord, null, {
            preset: 'islands#blueDotIcon',
            draggable: true
        });
        
        myMap.events.add('click', function (e) {
            var coords = e.get('coords');
            
            // Если метка уже создана – просто передвигаем ее.
            if (myPlacemark) {
                myPlacemark.geometry.setCoordinates(coords);
            }
            // Если нет – создаем.
            else {
                myPlacemark = createPlacemark(coords);
                myMap.geoObjects.add(myPlacemark);
                // Слушаем событие окончания перетаскивания на метке.
                myPlacemark.events.add('dragend', function () {
                    getAddress(myPlacemark.geometry.getCoordinates());
                });
            }
            getAddress(coords);
        });
        
        /* Событие dragend - получение нового адреса */
        myPlacemark.events.add('dragend', function(e){
            var coords = e.get('target').geometry.getCoordinates();
            var new_coords = [coords[0].toFixed(4), coords[1].toFixed(4)];
            $('#bpxl_infocoords').val(new_coords);
            ymaps.geocode(new_coords).then(function(res) {
                var data = res.geoObjects.get(0).properties.getAll();
                $('#bpxl_infoadress').val(data.text);
            });
            var zoom = myMap.getZoom()
            $('#bpxl_infoscale').val(zoom);
        });
        
        myMap.geoObjects.add(myPlacemark);  
        myMap.setCenter(coord, 12);
    });
    myMap.behaviors.disable('scrollZoom');
    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
        myMap.behaviors.disable('drag');
    }
}
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
 
<head>
    <title>Определение адреса клика на карте с помощью обратного геокодирования</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--
        Укажите свой API-ключ. Тестовый ключ НЕ БУДЕТ работать на других сайтах.
        Получить ключ можно в Кабинете разработчика: https://developer.tech.yandex.ru/keys/
    -->
    <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;apikey=<ваш API-ключ>" type="text/javascript"></script>
    <script src="event_reverse_geocode.js" type="text/javascript"></script>
    <script src="https://yandex.st/jquery/2.1.1/jquery.min.js"></script>
    <style type="text/css">
        html, body {
            width: 100%;
            height: 95%;
            margin: 0;
            padding: 0;
            font-family: Arial;
            font-size: 14px;
        }
        #map {
            width: 100%;
            height: 95%;
        }
        .header {
            padding: 5px;
        }
    </style>
</head>
<body>
<p class="header">Кликните по карте, чтобы узнать адрес</p>
<div id="map"></div>
Адрес: <input type="text" id="bpxl_infoadress">
Координаты: <input type="text" id="bpxl_infocoords">
Масштаб: <input type="text" id="bpxl_infoscale">
</body>
</html>
Проверяю работоспособность этого кода здесь - https://yandex.ru/dev/maps/jsb... e_geocode/, заменив родной код, моим.

Собственно, сами, проблемы:
1. При перемещении курсора кликом на карту, адрес и координаты не обновляются.
2. При изменении масштаба, коэффициент масштаба в input не меняется, только после перемещения метки.
3. Как удалить из адреса префикс "Россия, Санкт-Петербург" и оставить только улицу и дом?

Заранее спасибо!
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
23.12.2020, 18:49
Ответы с готовыми решениями:

Datagridview, как получить данные строки при клике по ней
в datagridview отображается таблица с данными, можно ли кликнув по строке, получить данные из этой строки?

Datagrid, как получить данные строки при клике по ней в textbox
Всем привет! Ребят, хочу получить всю (выделенную строку) из datagrid в textbox при двойном клике по ней (или по отдельно созданной...

Как получить данные при вводе в input?
Нужна ваша помощь. У меня есть работающий код, который мне выводит все посты и при введении в input, у меня работает search. Вопрос в том,...

0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
23.12.2020, 18:49
Помогаю со студенческими работами здесь

Как вывести сообщение при клике в input?
Здравствуйте как вывести сообщение при клике в inpute, а так же спрятать это сообщение при выходе из этого inputa. Например я пробовал...

Как подставить значение в input при клике на элементе?
Всем приветы! Подскажите пожалста, как такое сделать. Нужно чтобы при клике любом из блоков с классом .color-value значение цвета...

Как при клике, добавлять новое поле input во Vue?
Добрый вечер! Прошу помочь разобраться, как при клике добавлять новые поля. Со списком проблем нет. Там из массива в data через v-for...

Как задать бордер при клике всей линии <tr> используя input?
Прощу помощи в оформлении! Не пойму как с помощью input сделать бордер при клике Сейчас у меня все выглядит вот так: del Хочу...

Как получить данные из input?
нужна помощь, подскажите как получить данные в php скрипт из формы для отправки значение по умолчанию input допустим есть форма ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
1
Ответ Создать тему
Новые блоги и статьи
Переходник USB-CAN-GPIO
Eddy_Em 20.03.2026
Достаточно давно на работе возникла необходимость в переходнике CAN-USB с гальваноразвязкой, оный и был разработан. Однако, все меня терзала совесть, что аж 48-ногий МК используется так тупо: просто. . .
Оттенки серого
Argus19 18.03.2026
Оттенки серого Нашёл в интернете 3 прекрасных модуля: Модуль класса открытия диалога открытия/ сохранения файла на Win32 API; Модуль класса быстрого перекодирования цветного изображения в оттенки. . .
SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++
8Observer8 17.03.2026
Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip
Символические и жёсткие ссылки в Linux.
algri14 15.03.2026
Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .
[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора
ФедосеевПавел 14.03.2026
Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .
делаю науч статью по влиянию грибов на сукцессию
anaschu 13.03.2026
прикрепляю статью
SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++
8Observer8 10.03.2026
Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:
Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE
8Observer8 10.03.2026
Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru