...

Интерактивные Яндекс карты на формах.

Тема в разделе "Примеры сценариев", создана пользователем lattelix, 21 май 2023.

  1. lattelix

    lattelix Новичок

    Простой пример добавления Яндекс карты с которой пользователь может взаимодействовать. В примере описан способ указания на карте определённого места.
    Во вложениях вы можете скачать и импортировать в нужный раздел готовое приложение.

    1. Добавьте в контекст приложения следующие свойства (типа Строка):
    • адрес - adres
    • широта - shirota
    • долгота - dolgota

    2. В контекст самой формы добавьте свойство:
    "position" типа "произвольный тип"

    3. Добавьте на форму виджет код в который поместите скрипт:
    Спойлер: скрипт настроек карты
    HTML:
    <%if(false)%>
<!DOCTYPE html>
<html>
<head>
    <title>Добавление метки на карту</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script src="https://api-maps.yandex.ru/2.1/?apikey=133d78a5-de52-40e5-9989-dd25b0cbff15&lang=ru_RU" type="text/javascript"></script>
    <script>

setTimeout(() => {
    ymaps.ready(init);
}, 3000);
function init() {

    var myMap = new ymaps.Map("map", {
            center: [parseFloat(<%-Context.data.dolgota%>), parseFloat(<%-Context.data.shirota%>)],
            zoom: 17
        }, {
            searchControlProvider: 'yandex#search'
        }),

    // Создаем геообъект с типом геометрии "Точка".
        myGeoObject = new ymaps.GeoObject({
            // Описание геометрии.
            geometry: {
                type: "Point",
                coordinates: [parseFloat(<%-Context.data.dolgota%>), parseFloat(<%-Context.data.shirota%>)]
            },
            // Свойства.
            properties: {
                // Контент метки.
                iconContent: 'Я тащусь',
                hintContent: 'Ну давай уже тащи'
            }
        }, {
            // Опции.
            // Иконка метки будет растягиваться под размер ее содержимого.
            preset: 'islands#blackStretchyIcon',
            // Метку можно перемещать.
            draggable: true
        }),
        myPieChart = new ymaps.Placemark([
            55.847, 37.6
        ], {
            // Данные для построения диаграммы.
            data: [
                {weight: 8, color: '#0E4779'},
                {weight: 6, color: '#1E98FF'},
                {weight: 4, color: '#82CDFF'}
            ],
            iconCaption: "Диаграмма"
        }, {
            // Зададим произвольный макет метки.
            iconLayout: 'default#pieChart',
            // Радиус диаграммы в пикселях.
            iconPieChartRadius: 30,
            // Радиус центральной части макета.
            iconPieChartCoreRadius: 10,
            // Стиль заливки центральной части.
            iconPieChartCoreFillStyle: '#ffffff',
            // Cтиль линий-разделителей секторов и внешней обводки диаграммы.
            iconPieChartStrokeStyle: '#ffffff',
            // Ширина линий-разделителей секторов и внешней обводки диаграммы.
            iconPieChartStrokeWidth: 3,
            // Максимальная ширина подписи метки.
            iconPieChartCaptionMaxWidth: 200
        });
    myMap.geoObjects
        .add(new ymaps.Placemark([parseFloat(<%-Context.data.dolgota%>), parseFloat(<%-Context.data.shirota%>)], {
            balloonContent: '<strong><%-Context.data.adres%></strong>'
        }, {
            preset: 'islands#dotIcon',
            iconColor: '#735184'
        }))
}
</script>
    <style>
        html, body, #map {
            width: 100%; height: 100%; padding: 0; margin: 0;
        }
    </style>
</head>
<body>
    <div id="map"></div>
</body>


</html>

    4. В сценарии формы добавьте скрипт:
    Спойлер: скрипт обращения к апи
    Код:
    
const key = '12345678-1234-1234-1234-123456789012'
    const location = Context.data.adres;

    async function getGeoPosition(): Promise <void> {
    const     coord = await fetch(`https://geocode-maps.yandex.ru/1.x/?apikey=${key}&format=json&geocode=${location}`)
    .    then(res => {
    if (!    res.ok) {
    throw new     Error(res.status.toString() + ' ' + res.statusText)
    }
    return     res.json();
    })
    ViewContext.data.position = [];
    ViewContext.data.position = coord.response.GeoObjectCollection.featureMember[0].GeoObject.Point.pos.split(" ");
    const     app = await Application.search().where(f => f.__id.eq(Context.data.__id)).first();

    app!.data.shirota = ViewContext.data.position[0].toString();
    app!.data.dolgota = ViewContext.data.position[1].toString();
    await app!.save();
    }

    async function onInit () {
    await getGeoPosition();
    }

    5. В константу "key" нужно вписать ключ к апи. Доступ к Яндекс картам имеет свою цену, но вы можете получить тестовый ключ для проверки своего решения.
    Для этого перейдите по ссылке (https://yandex.ru/dev/maps/commercial/) и войдите в кабинет разработчика (для этого нужен аккаунт в Яндексе)
    [​IMG]
    Нажмите кнопку "получить API"
    [​IMG]
    Далее выберите нужное и нажмите "продолжить"
    [​IMG]
    В конце вы окажитесь в интерфейсе API, где вам нужно будет жмякнуть кнопку "новый ключ" (1) и скопировать полученный ключ (2).
    [​IMG]
    Вам останется только вставить этот ключ в константу "key" в скрипте выше и всё заработает.
    Готово! Приятного пользования)

    Как это работает:
    Создайте элемент приложения (откройте форму создания)
    [​IMG]
    Заполните название и адрес
    [​IMG]
    Откройте элемент приложения и получите готовый результат
    [​IMG]

    Вложения:

    Последнее редактирование: 21 май 2023
    lattelix 21 май 2023
    #1
Вы должны войти или зарегистрироваться, чтобы ответить.