Как сделать карту на сайте html css

Обновлено: 08.01.2025

JavaScript API Яндекс.Карт - это набор классов, позволяющий разместить интерактивную карту на странице сайта, добавить на карту необходимые элементы управления и расположить географические объекты.

Для того чтобы вставить карту на страницу, выполните описанные ниже шаги.

Шаг 1. Загрузите API

Прежде чем использовать функции API его модули должны быть загружены в браузер. Для того, чтобы загрузить API добавьте скрипт загрузки в заголовок head HTML-страницы:

Примечание. Для работы с JavaScript API 1.x ключи больше не нужны, то есть параметр key является необязательным. Форма получения нового ключа больше не доступна.

Шаг 2. Создайте контейнер для карты

Создайте контейнер для будущей карты, например, размером 600х400 пикселов. Размеры контейнера можно задать явно с помощью HTML-атрибута style :

В примере в качестве контейнера для карты использован HTML-элемент div . Его уникальный идентификатор ( id ) будет использоваться в следующем шаге для получения указателя на контейнер карты .

Шаг 3. Создайте карту

Создавайте карту после того, как веб-страница загрузится целиком. Это даст уверенность в том, что контейнер для карты создан и к нему можно обращаться по id .

Чтобы добавить карту на страницу, создайте обработчик события окончания загрузки страницы onLoad и разместите его в теге head после скрипта загрузки API:

Совет. Для создания обработчика события onLoad и ссылки на DOM-элемент, служащий контейнером карты, удобно использовать встроенный в API фреймворк jQuery.

В обработчике события onLoad :

Задайте с помощью метода setCenter() начальные параметры отображения карты: географические координаты центра карты (центр Москвы: 37.63, 55.75) и коэффициент масштабирования (10):

Подробнее о параметрах карты читайте в разделе Параметры карты.

Обработчик события onLoad можно также реализовать стандартными методами JavaScript без использования jQuery:

Внимание. Если на странице уже есть обработчик стандартного события onload , то код для создания карты следует добавить в него.

Результат

Полный текст примера:

Для подробного изучения пример можно открыть в новом окне.

Что дальше?

В разделе Основы узнайте, как создать и удалить карту, как использовать параметры карты, как загрузить API.

В разделе Элементы управления ознакомьтесь с действиями, которые можно производить на карте с помощью элементов управления.

В разделе События изучите механизм событий API Яндекс.Карт.

В разделе Объекты-оверлеи на карте узнайте, какие объекты можно добавлять на карту, как изменять их внешний вид, объединять объекты в группы и удалять их с карты.

В разделе Сервисы ознакомьтесь с вспомогательными инструментами API: геокодером, маршрутизатором и визуализатором языка YMapsML.

В разделе Пользовательские карты узнайте, как с помощью API Яндекс.Карт создать пользовательскую карту, организовать навигацию по плану местности, фотографии или чертежу.

Не получилось?

Если при установке карты возникли проблемы, выполните следующие действия:

Поищите описание проблемы в Клубе Разработчиков API Яндекс.Карт. Если готового ответа не нашлось, то задайте вопрос экспертам клуба.

В этой статье мы с Вами рассмотрим как составить клиентскую изображение-карту, при клике на определенную область которой, мы сможем перейти по определенной ссылке. Составление изображений-карт можно редко встретить на сайтах, так как этот процесс довольно-таки трудоемкий, но если вы хотите удивить ваших посетителей необычной формой для ссылок и у вас есть в распоряжении свободное время для самообразования, то эта статья для вас.

Атрибут name элемента является обязательным, он связан с атрибутом usemap элемента (создает связь между изображением и картой).

Значение атрибута	Определение
default	Весь регион.
rect	Прямоугольная область (x1,y1,x2,y2).
circle	Круглая область (x,y,r- радиус).
poly	Многоугольную область (x1,y1,x2,y2. xn,yn).

Рис. 48 Создание активной области с использованием системы координат.

Пример использования

Давайте рассмотрим пример в котором при клике по определённой фигуре на одном рисунке происходит переход на разные веб-страницы, которые описывают эти фигуры (ссылки на Википедию):

И так по порядку, что мы сделали в этом примере:

Разместили изображение (тег ), которое мы в последствии будем использовать при составлении изображении-карты. В атрибуте usemap необходимо обязательно указать имя изображения-карты, которое мы будем использовать в элементе (необходимо обязательно перед именем указать решетку).
Размещаем изображение-карту (тег ), задаем единственный и обязательный атрибут элемента name (имя). Обратите внимание, что в отличие от тега мы задаем имя без решетки, в остальном они должны совпадать.
Размещаем четыре тега , которые определяют интерактивные области в изображении-карте:
- Первой мы задаем прямоугольную область (атрибут shape со значением "rect" ), она соответствует нашему первому изображению (первые два значения соответствуют верхнему левому углу, следующие два значения определяют правый верхний и нижний угол).
- Второй указываем круглую область (атрибут shape со значением "circle" ), она соответствует нашему второму изображению (первое значение соответствует координатам по оси x, а второе по оси y, третее определяет радиус).
- Что касается третей и четвертой фигуры, то они составлены по принципу многоугольной области (атрибут shape со значением "poly" ). Вы определяете необходимое количество точек на изображении, высчитываете координаты этих точек (графический редактор) и указываете в таком порядке, чтобы браузер их мог соединить одной линией. На примере треугольника (третий рисунок): первая точка (координаты x и y вершины), вторая точка (координаты x и y левого нижнего угла) и третяя точка (координаты x и y правого нижнего угла).
В HTML5, если у элемента указан глобальный атрибут id, то он должен иметь то же значение, что и атрибут name .

Результат нашего примера в браузере (кликабельно) и на изображении:

Рис. 49 Пример построения изображения-карты в HTML.

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:
- Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл и изображение) в любую папку на вашем жестком диске:
- Используя полученные знания составьте следующую изображение-карту:
Подсказка: чтобы получить координаты изображения воспользуйтесь редактором изображений, даже самый простой редактор, например, Paint, отображет координаты курсора. Выпишите координаты на листок или в отдельный файл и внесите значения на страницу.

Если у Вас возникнут трудности с выполнением задания, то проинспектируйте код страницы, открыв пример в отдельном окне и внимательно его изучите.

Для того, чтобы создать карту изображения вам пригодятся знания о том, как вставить картинку и ссылку в html-документ.

Теперь давайте выясним, что такое карта изображения.
С помощью карты изображения вы можете сделать так, что при нажатии на разные области одной и той же картинки, вы попадаете на разные страницы. Карту изображения некоторые называют еще навигационной картой.
Я понимаю, что на словах это тяжело понять, потому предлагаю посмотреть пример, как выглядит карта изображения вживую.
Только обратите внимание: картинка одна, а области и путь перехода разный.

Не бойтесь, это вовсе не сложно. Самое главное – понять теорию и закрепить практикой.

Ну что, приступим к теории.

Карты изображения (навигационные карты) задаются тегом .
Тег - это коробка, внутри которой размещают теги .
Тег предназначен для определения геометрической области с ссылкой, привязанной к каждой области.

Атрибуты areа

2. Атрибут coords
coords – это расположение геометрической формы.

Давайте рассмотрим пример на геометрической форме прямоугольника.

Прямоугольная область

Теперь переходим к координатам.
Точка отсчета начинается с левого верхнего угла картинки, координаты которого (0;0)

Порядок записи координат для атрибута coords будет таким:

Значит, нужно указать координаты рабочей области у прямоугольника верхний-левый и нижний-правый угол.

Для примера с прямоугольником №1 возьмите такие координаты:

x1=25, y1=36, x2=114, y2=98

Вот так будет выглядеть код:

Дальше нужно указать путь(ссылку) для выбранной области. Как сделать ссылку в HTML, вы уже знаете.

В нашем случае это будет выглядеть следующим образом:

Теперь соберем все вместе и пропишем еще координаты к другому прямоугольнику №2 с такими данными (x1=153, y1=11, x2=219, y2=127).

Теперь смотрите на результат. Нажмите на прямоугольник №1 и на прямоугольник №2

Круглая область

Теперь переходим к координатам.
Чтобы создать координаты для круглой области, нужно прописать данные к центру (xy) и указать длину радиуса (R).
Порядок записи координат для атрибута coords будет таким:

Для круга №1 возьмите такие координаты:

x=46, y=48; а длина радиуса - R=35

Теперь дадим карте название и привяжем карту к рисунку:

Теперь соберем все вместе и пропишем еще координаты к кругу №2 с такими данными x=158, y=75, R=53.

Теперь смотрите на результат. Нажмите на круг №1 и на круг №2:

Многоугольная область

Многоугольная область самая сложная область в навигационной карте.

Теперь переходим к координатам.

Порядок записи координат для атрибута coords будет таким:

Разъяснение:
x1 , y1 - координаты первого угла;
x2 , y2 - координаты второго угла;
xN , yN - координаты последнего угла

То есть, для многоугольника №2 это выглядит вот так:

Теперь дадим карте название и привяжем карту к рисунку:

Теперь соберем все вместе и пропишем еще координаты к шестиугольнику №1 с такими данными: x1=54, y1=20, x2=109, y2=20, x3=147, y3=58, x4=109, y4=96, x5=54, y5=96, x6=16, y6=58.

Теперь смотрите на результат. Нажмите на многоугольник №1 и на многоугольник №2:

Возможность комбинирования

Бывают такие случаи, когда нужно использовать одновременно на одной картинке разные области, например, круг и прямоугольник:

Дополнение с использованием TITLE

Для каждой области можно прописать подсказки, используя атрибут title.

Теперь смотрите на результат. Наведите курсор мышки на круг, а потом на прямоугольник:

Вот и все. С картой изображения в HTML (навигационная карта) мы разобрались.

Как сделать Интерактивную Карту на сайте. Работа с SVG Изображениями

Сейчас мы пошагово разберемся с тем как сделать какое либо изображение на сайте интерактивным, то есть, чтобы все части изображения можно было выбрать наведением мыши и нажать на них. Примером такого рода изображений могут выступать фото на сайтах по продаже недвижимости, сайты с картами где можно нажать на их части для перехода на другую страницу или для запуска определенного действия или для включения анимации на сайте. Начнем!

ШАГ 1. Подготовка базовой HTML разметки

Добавьте код ниже:

После того как вы добавите этот код, не пугайтесь если вы не увидели свою картинку, которую подключили. Промотайте страницу немного вниз, она будет там. Изображение, которое вы подключили съехало вниз из-за елемента svg, который был добавлен перед ней. Мы в нем прописали размеры нашей картинки и он теперь занимает такое же место как и оригинальное изображение. Примечание. В атрибуте viewBox елемента svg необходимо прописать размер вашего изображения которое вы будете делать
интерактивным.

ШАГ 2. Создание SVG елементов

После выделения выберите появившуюся строку выделенной вами части изображения в редакторе xml. Затем выберите поле d этого елемента и скопируйте его содержимое немного ниже.

В поле d будет довольно большой объем координат. Копируйте это все и вставляйте в вашем HTML коде в атрибут d елемента path.

После добавления координат можете обновить страницу. Вы увидите, что появился черная проекция изображения, которую вы обводили ранее.

ШАГ 3. Добавление стилей

Для того, чтобы все это дело нормально отображалось, нам нужно добавить такие стили нашим елементам:

В зависимости от того, что вы за картинку использовали у вас будет немного разный вид изображения. Вот, например, у меня получилось так. Довольно криво я навел контуры картинки, но для меня главное было показать, что вышло в итоге) Я не делал всю карту интерактивной и более аккуратной ибо это заняло бы намного больше времени, а результат был бы один и тот же. Главное, что вы поняли как это работает и как это реализовывать.

Примечание. К таким интерактивным картинкам вы можете добавлять ссылки, подключать различные скрипты для увеличения общего функционала. Вы в фантазии не ограничиваетесь.

Читайте также: