M
M
mrfinch272019-11-20 12:19:16
Yandex maps
mrfinch27, 2019-11-20 12:19:16

Why is the page spinning to the Yandex map?

Good afternoon.
There is a site. In one section, maps are connected via api.
The problem is that when the page loads, it immediately automatically scrolls to the maps.
It is when creating a map with an api script.
the code

<script src="https://api-maps.yandex.ru/2.1/?apikey=()&lang=ru_RU" type="text/javascript"></script>
       <script type="text/javascript">
    // let _stations = []
    let _stations = [
            {
                name: 'Богородское',
                coords: [55.818712116836367,37.704453112073175]
            },
            
            {
                name: 'Кашира',
                coords: [54.82011991926234,38.205794]
            },
            {
                name: 'Лотошино',
                coords: [56.22199498122068,35.580107999999946]
            },
            {
                name: 'Люберцы',
                coords: [55.674034551602596,37.91624]
            },
            {
                name: 'Лосино-Петровский',
                coords: [55.87211976271298,38.18549149999999]
            },
            {
                name: 'Луховицы',
                coords: [54.97161290298113,38.996041500000004]
            },
            {
                name: 'Ликино-Дулево',
                coords: [55.716610156500146,38.9444065]
            },
            {
                name: 'Лыткарино',
                coords: [55.574924727710646,37.92396549999995]
            },
            {
                name: 'Лобня',
                coords: [56.029529189451375,37.469646999999966]
            },
            {
                name: 'Видное',
                coords: [55.55175131588245,37.70921849999997]
            },
            {
                name: 'Гжель',
                coords: [55.60856919460229,38.39477649999995]
            },
            {
                name: 'Высоковск',
                coords: [56.31596483489422,36.55368450000002]
            },
            {
                name: 'Можайск',
                coords: [55.50073350998283,36.02542999999997]
            },
            {
                name: 'Мытищи',
                coords: [55.920605498273523,37.753851499999996]
            },
            {
                name: 'Малоярославец',
                coords: [55.01635220994788,36.46001199999997]
            },
            {
                name: 'Малаховка',
                coords: [55.64402334743328,38.00599449999998]
            }
        ]
        let startingPrice= 2500;
        let routeLength =  null
        fetch('https://api.hh.ru/metro/1').then((resp)=>{
            return resp.json()
        }).then((data)=>{
            // data.lines.map((line)=>{
            //     line.stations.map((station)=>{
            //         _stations.push({
            //             name: station.name,
            //             lat: station.lat,
            //             lng: station.lng
            //         })
            //     })
            // })
      
            function init(){
                // Создание карты.    
                var myMap = new ymaps.Map("map", {
                    center: [55.75980205, 37.65522365],
                    zoom: 11,
                    controls: []
                });
                // Создадим панель маршрутизации.
                routePanelControl = new ymaps.control.RoutePanel({
                    options: {
                        // Добавим заголовок панели.
                        showHeader: true,
                        title: 'Расчёт стоимости эвакуации'
                    }
                })
                // Пользователь сможет построить только автомобильный маршрут.
                routePanelControl.routePanel.options.set({
                    types: {auto: true}
                });
                zoomControl = new ymaps.control.ZoomControl({
                    options: {
                        size: 'small',
                        float: 'none',
                        position: {
                            bottom: 145,
                            right: 10
                        }
                    }
                });
                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) {
                            routeLength = route.getActiveRoute().properties.get("distance");
                            routeValue = routeLength.value/1000
                            let summ = 2500 + (Math.floor(routeValue)*60)
                            // Выводим результаты
              evakuatorsOnTheMap.style.display = 'none'
              destination.style.display = 'none'
              results.style.display = 'block'
                            let resultMap = document.getElementById('map-result')
              rasstoyanie.innerHTML = routeLength.text;
              summa.innerHTML = summ;
              window.location.hash='map-result'
            
                            let radios = document.querySelectorAll('[name="mapSelect"]')
                            radios.forEach((radio)=>{
                                radio.addEventListener('change', (el)=>{
                                    let summ = Number(el.currentTarget.value) + (Math.floor(routeValue)*50)
                                    console.log('EventListener: ', el.currentTarget.nextSibling)
                                    resultMapHead.innerHTML = ` <h3>Расстояние: ${routeLength.text} </h3>
                                        <h3 style="color:red">Стоимость: ${summ} ₽</h3>`
                                    
                                })
                            })
                            // // Получим протяженность маршрута.
                            // var length = route.getActiveRoute().properties.get("distance"),
                            // // Вычислим стоимость доставки.
                            // price = calculate(Math.round(length.value / 1000)),
                            // // Создадим макет содержимого балуна маршрута.
                            //     balloonContentLayout = ymaps.templateLayoutFactory.createClass(
                            //         '<span>Расстояние: ' + length.text + '.</span><br/>' +
                            //         '<span style="font-weight: bold; font-style: italic">Стоимость эвакуации: ' + price + ' р.</span>');
                            // // Зададим этот макет для содержимого балуна.
                            // route.options.set('routeBalloonContentLayout', balloonContentLayout);
                            // // Откроем балун.
                            // activeRoute.balloon.open();
                        }else {
                            console.log('Подождите, идет рассчет оптимального маршрута и цены')
                        }
                    });

                });
                // Функция, вычисляющая стоимость доставки.
                function calculate(routeLength) {
                    return Math.round(startingPrice + (routeLength * 50));
                }

                _stations.map((station)=>{
                    let myPlacemark = new ymaps.Placemark(station.coords, {}, {
                        iconLayout: 'default#image',
                        iconImageHref: 'https://buksir24.ru/images/logo-evak.png',
                        iconImageSize: [40, 40]
                    });
                    myMap.geoObjects.add(myPlacemark); 
                })
                
            }
            ymaps.ready(init);
            
        })
        </script>

if you remove the line with the api script, then everything is ok. please tell me how to fix this?

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question