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

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

23.12.2020, 18:49. Показов 2518. Ответов 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
Ответ Создать тему
Новые блоги и статьи
Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути
Programma_Boinc 01.01.2026
Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Сочетание глобально распределённой вычислительной мощности и инновационных. . .
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост.
Programma_Boinc 28.12.2025
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / **********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / **********/ gallery/ bKBkQFf Пост отсюда. . .
Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США.
Programma_Boinc 26.12.2025
Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .
Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка.
Programma_Boinc 23.12.2025
Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .
PhpStorm 2025.3: WSL Terminal всегда стартует в ~
and_y87 14.12.2025
PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .
Как объединить две одинаковые БД Access с разными данными
VikBal 11.12.2025
Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук
volvo 07.12.2025
Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом
volvo 04.12.2025
Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python
IndentationError 23.11.2025
Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов
Argus19 22.11.2025
Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru