Answer the question
In order to leave comments, you need to log in
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>
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question