Apply JavaScript code with UniHTML

artem_niko · December 8, 2020

Hello!

How I can apply this code to project, using UniMap or UniHTML?

On Yandex, in cabinet of developer, I was found example JavaScript code in Yandex:

https://yandex.ru/dev/maps/jsbox/2.1/deliveryCalculator/

And then I was rewriting thix example and rewrote the code for my needs (partially):

ymaps.ready(init);

function init() {
    var 
        myMap = new ymaps.Map('map', {center: [52.3152,104.2548], zoom: 9, controls: []}),
    // Создадим панель маршрутизации.
        routePanelControl = new ymaps.control.RoutePanel({options: {showHeader: true, title: 'Маршрут этапа №1'}}),
        zoomControl = new ymaps.control.ZoomControl({options: {size: 'small', float: 'none', position: {bottom: 145, right: 10}}});
        routePanelControl.routePanel.options.set({types: {auto: true},reverseGeocoding: false});
    // Если вы хотите задать неизменяемую точку "откуда", раскомментируйте код ниже.
        routePanelControl.routePanel.state.set({fromEnabled: false, from: '52.3152,104.2548',
                                                  toEnabled: false,   to: '57.19528,57.88389'});

    myMap.controls.add(routePanelControl).add(zoomControl);
    // Получим ссылку на маршрут.
    routePanelControl.routePanel.getRouteAsync().then(function (route) {
        // Зададим максимально допустимое число маршрутов, возвращаемых мультимаршрутизатором.
        route.model.setParams({results: 1}, true);
        // Повесим обработчик на событие построения маршрута.
        route.model.events.add('requestsuccess', function () {
            var activeRoute = route.getActiveRoute();
            if (activeRoute) {
                // Получим протяженность маршрута.
                var length = route.getActiveRoute().properties.get("distance"),
                // Создадим макет содержимого балуна маршрута.
                    balloonContentLayout = ymaps.templateLayoutFactory.createClass('<span>Расстояние: ' + length.text + '.</span>');
                // Зададим этот макет для содержимого балуна.
                route.options.set('routeBalloonContentLayout', balloonContentLayout);
                // Откроем балун.
                activeRoute.balloon.open();
            }
        });

    });
}

As result, now I'm getting JavaScript and HTML page.

This is code of HTML page:

<!DOCTYPE html>
<html>
<head>
    <title>Маршрут этапа №1</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="msccCalculateLengthStep.js" type="text/javascript"></script>
    <style>
        html, body, #map {width: 100%; height: 100%; padding: 0; margin: 0;}
    </style>
</head>
<body>
    <div id="map"></div>
</body>
</html>

He is creating this page:

image.png.f454d39ff1b1fa5e68794219599841b8.png

It's allready very good now, because now I'm getting length between two point!

Actually, exist questions:

How get value (3 700 км) in my form in UniGUI project from this map? For example: UniLabel1.Caption:='3 700 км';
How put HTML code in UniHTML1 and show map with route?
How transfer my values in JavaScript code? I mean values of coordinates of points from UniFormattedEdit1 and UniFormattedEdit2.

Please, help me select map and help assign JavaSctipt code with UniGUI...

If question in money - please, say me price.

Sign In

Apply JavaScript code with UniHTML

Recommended Posts

artem_niko

Link to comment

Share on other sites

Join the conversation

Browse

Activity