ГРУППА КУРСА
|
Добавление карты на сайтНа сайте организации обычно указывается её адрес. Для удобства потенциальных клиентов, вместе с адресом располагается карта, на которой показано местонахождение организации. Можно сделать скрин карты в подходящем масштабе и создать обычное изображение. Но сайт выглядит гораздо интереснее и солиднее, если добавить на него Яндекс карты или Google maps. У Яндекс карт есть только один недостаток - они не поддерживаются старыми браузерами. В остальном они лучше Гугла. Они содержат больше деталей, которые помогают лучше ориентироваться на карте. Из-за этого Яндекс карта загружается немного дольше, но это загрузка полезного контента. Кроме того, подключение карты делается проще. Поэтому Яндекс карты намного популярнее. Добавление Яндекс картыРазместить карту на своём сайте можно двумя способами: воспользоваться конструктором карт или использовать API Яндекса и написать скрипт самостоятельно. Для входа в конструктор нужен почтовый аккаунт на Яндексе. Карты, созданные в конструкторе, хуже поддерживаются браузерами, поэтому я рекомендую использовать второй способ. Он совсем несложный. Создадим страницу и добавим на неё блок, в который будет загружаться карта. Этому блоку нужно задать атрибут id и установить размеры. По id будет определяться блок для карты. HTML: +
Для использования карты нужно подключить API Яндекс карт. Это выполняет следующий код:
Добавьте этот код на созданную страницу. Используя API Яндекса, пишем скрипт, добавляющий карту: JavaScript:
Поясню этот скрипт: карта создаётся внутри функции initMap(). В 20 строке функцию запускает метод ymaps.ready(). Это нужно, чтобы API загрузился до начала его использования. Карту создаёт объект класса ymaps.Map. Нужно указать два параметра. В первом параметре указывается id блока, в который загружается карта. Второй параметр - это объект с настройками карты. Настройки такие: center - координаты центра карты.
zoom - число от 0 до 19. Определяет масштаб карты. Чем меньше число, тем больше масштаб. Координаты центра указываются в массиве, содержащем два элемента: широта и долгота. Чтобы здание или другой объект располагался в центре карты, нужно указать координаты этого объекта. Координаты можно узнать следующим способом.
Укажите в скрипте координаты нужного Вам объекта, и карта готова. Она должна отображаться на странице. Добавление меткиВажный объект на карте можно указать при помощи метки. Например, здание, в котором располагается Ваша организация. Это выглядит так: Чтобы поставить метку, нужно создать переменную для объекта метки. Она должна быть объявлена на глобальном уровне, то есть, до функции initMap().
Внутри функции initMap(), после создания карты нужно добавить такой код:
Скрипт работает так: создаётся объект класса ymaps.Placemark. Указывается два параметра. В первом указываем координаты метки. Второй параметр - это объект с настройками метки. Можно указать такие настройки: hintContent - текст, появляющийся при наведении на метку balloonContent - текст в окне, которое появляется при клике не метке В 23 строке созданная метка добавляется на карту. У объекта карты есть метод geoObjects.add(), который добавляет на карту объекты. В нашем примере объект карты записан в переменную map. К ней применён этот метод. Весь код скрипта, добавляющего карту с меткой, выглядит так:
Если координаты центра и метки совпадают, то можно массив с координатами записать в переменную, а не писать каждый раз. Но метку можно поставить в любом месте. Тогда координаты нужно писать отдельно. |