Яндекс карта с управлением для сайта
23 мая 2020 JavaScript
Создать карту в конструкторе Яндекс карт наверное самый простой и быстрый способ, когда надо добавить местоположение на сайте. Но если нужно сделать карту с внешними элементами управления, то конструктора здесь окажется мало. Самый распространенный пример, когда есть несколько офисов компании, и при нажатии ссылки «Показать на карте», карта автоматически перестраивается и показывает адрес нужного офиса. В этой статье мы рассмотрим готовый пример реализации этого функционала. Итак, давайте приступим!
Подключение скриптов
Для начала необходимо подключить скрипт API Яндекс карт и наш скрипт для работы с картой (код скрипта main-map.js будет рассмотрен далее):
<script src="//api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script> <script src="js/main-map.js" type="text/javascript"></script>
HTML-код
Добавляем для примера 3 ссылки «Показать на карте». Это будут ссылки на различные точки на карте. Далее контейнер для карты <div id=»map»></map>. Еще я добавил стиль для этого блока, чтобы он растянулся по ширине.
Одним из важнейших инструментов в работе программиста и системного администратора является SSH. SSH, или Secure Shell, — это протокол, используемый для безопасного входа на удаленные системы. Это самый распространенный способ получения доступа к удаленным серверам Linux. Если не знаете как подключиться по SSH из Windows, то читайте в этой статье подключение по ssh
<a href="#address1" class="map-control">Показать на карте</a>
<a href="#address2" class="map-control">Показать на карте</a>
<a href="#address3" class="map-control">Показать на карте</a>
<style>
#map {
width: 100%; height: 400px; padding: 0; margin: 0;
}
</style>
<div id="map"></div>JavaScript-код
ymaps.ready(init);
function init () {
var myMap = new ymaps.Map("map", {
center: [55.742932093456126,37.62389544445802],
zoom: 16,
controls: []
}),
myGeoObject = new ymaps.GeoObject({
});
var address1 = new ymaps.Placemark([55.742932093456126,37.62389544445802], {
balloonContent: 'Точка 1',
}, {
preset: 'islands#dotIcon',
iconColor: '#D13F22'
});
var address2 = new ymaps.Placemark([55.791055862396824,37.52825102327829], {
balloonContent: 'Точка 2',
}, {
preset: 'islands#dotIcon',
iconColor: '#D13F22'
});
var address3 = new ymaps.Placemark([55.82726918688044,37.637157631026405], {
balloonContent: 'Точка 3',
}, {
preset: 'islands#dotIcon',
iconColor: '#D13F22'
});
myMap.geoObjects
.add(myGeoObject)
.add(address1)
.add(address2)
.add(address3);
var mapControls = $('.map-control');
var destinations = {
'#address1': address1,
'#address2': address2,
'#address3': address3
};
mapControls.each(function(item, i) {
// Прокрутка к блоку с картой и переход к точке
$(this).bind('click', function() {
var position = $('#map').offset().top;
window.scrollTo(0, position);
var destination = destinations[$(this).attr('href')];
myMap.panTo(destination.geometry.getCoordinates(), {
flying: true,
duration: 3000
})
return false;
}
);
});
}
В коде мы указываем точки с координатами и в конце обработчик, который при нажатии на ссылку плавно пролистывает карту к нужной точке. Кстати координаты точек вы можете получить в Геокодере API Яндекс.Карт.
Сегодня я расскажу как можно легко и совершенно бесплатно создать версию для слабовидящих практически для любого сайта. Это решение подойдет и для сайтов государственных организаций, так как полностью соответствует ГОСТ. Наша версия сайта для слабовидящих будет с удобным меню и Читать далее
data-* атрибуты позволяют передавать некую скрытую информацию в элементах для её дальнейшего использования. Рассмотрим пример, когда на сайте есть список товаров и при нажатии кнопки "Купить", скрипту передавалось бы название и цена выбранного товара. <div id="157" class="product"> <div class="name">Системный блок</div> Читать далее
Возникла задача сделать прикрепление сайдбара, такое же, как в ВКонтакте. При скролле до верхней границы элемента он закрепляется, а при достижении определенного уровня останавливается и прокручивается до конца вместе со страницей. Раньше приходилось реализовывать подобное с нуля и это было Читать далее
В этой статье рассмотрим как можно вызвать печать страницы с помощью JavaScript, распечатать отдельные блоки сайта и оформить распечатываемую страницу стилями. Вызвать печать на странице Печать документа на странице можно вызвать JavaScript функцией print(). Пример: <a href="javascript:(print());" class="button-print">Печать</a> Оформление страницы Читать далее
Сегодня рассмотрим пример создания кнопки наверх с использованием библиотеки jQuery, которая появляется при скролле страницы и при нажатии на неё слистывает страницу на самый верх. Подключаем библиотеку jQuery <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> Код HTML <div class="scroll-up"></div> Код CSS <style> .scroll-up { position:fixed; Читать далее
Данный пример подойдет всем сайтам у которых есть якорные ссылки, особенно будет актуально для лендинг пейдж. При нажатии на ссылку, которая содержит якорь, происходит плавная прокрутка к элементу. Обычно якорная ссылка содержит в атрибуте href ID элемента назначения, со знаком Читать далее
Как сделать кнопку назад на сайте? Самый простой вариант это с помощью JavaScript-функции history. С ней можно переходить вперед, назад, обновлять страницу и делать переход на две и более страницы сразу. Кнопка назад Как ссылка: <a onclick="javascript:history.back(); return false;">Назад</a> Как Читать далее
Добавить комментарий