Последние записи

Интенсив по Python: Работа с API и фреймворками 24-26 ИЮНЯ 2022. Знаете Python, но хотите расширить свои навыки?
Slurm подготовили для вас особенный продукт! Оставить заявку по ссылке - https://slurm.club/3MeqNEk

Online-курс Java с оплатой после трудоустройства. Каждый выпускник получает предложение о работе
И зарплату на 30% выше ожидаемой, подробнее на сайте академии, ссылка - ttps://clck.ru/fCrQw

1st
Фев

Интерактивная карта на сайте

Posted by Chas under Пост-обзор

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

Это было сделано при помощи тэгов map и area. Тэг map — это векторная карта, который содержит теги area, которые представляют полигоны, прямоугольники или эллипсы. Тонкости работы с ними описывать не буду, т.к. найти их будет не сложно, а лучше у меня не получится ).

Лучше опишу, как я делал карту.

Сначала я нарисовал растровую картинку нужного размера с изображением районов.
В CorelDraw создал документ, по размером точно совпадающий с полученным изображением и обвёл контуры районов.
Преобразовал все фигуры в полигоны (многоугольники без скруглённых углов). Это надо затем, что бы Корел сохранял данные в тэги polygon, с указанием абсолютных значений координат.

Дал уникальное название каждому полигону, что бы можно было их отличить друг от друга.
Сохранил нарисованный файл с границами областей в формат SVG.

В итоге получился SVG-файл, который можно открыть в любом текстовом редакторе, где каждому району соответствует свой тэг polygon. И у каждого тэга есть аттрибут points, который содержит точки почти в нужном формате.

Отличия заключаются в том, что в SVG после каждой X-координаты идёт запятая, а после Y-координаты пробел, тогда как в HTML (

) все значения разделены запятыми. Поэтому мне пришлось побыстрому накатать программку, которая преобразует строку с SVG-координатами в HTML-координаты.

Естественно, для рисования не обязательно использовать CorelDraw, а взять любой другой подходящий SVG-редактор (напр. Incscape).

Пример работы с html-картами:

<map name="Navigation">
        <area id="studgorodok" href="#" title="Студгородок" alt="Студгородок" shape="poly" 
                                class="{strokeColor:’000000′, strokeWidth:1, fillColor:’ff0000′, fillOpacity:0.6}"
                                coords="99, 135, 95, 131, 95, 130, 92, 125, 88, 117, 87, 115, 92, 113, 94, 110, 97, 114, 108, 105, 109, 104, 114, 100, 115, 101, 117, 98, 116, 97, 131, 85, 139, 86, 140, 88, 141, 89, 144, 91, 151, 94, 154, 95, 154, 96, 155, 97, 156, 97, 156, 98, 155, 98, 155, 99, 156, 100, 156, 101, 156, 101, 157, 103, 157, 104, 158, 105, 160, 107, 163, 112, 163, 115, 163, 118, 162, 120, 160, 123, 159, 126, 157, 127, 154, 129, 145, 134, 142, 135, 139, 136, 137, 136, 130, 137, 116, 139, 109, 139, 106, 138, 103, 136, 102, 135, 102, 135, 100, 135"></area>
        <area id="mirny" href="#" title="Мирный" alt="Мирный" shape="poly" 
                                class="{strokeColor:’000000′, strokeWidth:1, fillColor:’ff0000′, fillOpacity:0.6}"
                                coords="82, 85, 80, 82, 80, 81, 79, 81, 79, 81, 79, 80, 78, 80, 78, 80, 77, 80, 77, 80, 74, 77, 72, 74, 72, 74, 72, 71, 72, 70, 72, 68, 71, 68, 70, 66, 70, 66, 70, 66, 70, 66, 71, 66, 71, 65, 84, 58, 84, 58, 83, 56, 82, 52, 83, 51, 84, 50, 85, 50, 87, 48, 87, 48, 88, 49, 89, 50, 90, 51, 91, 52, 92, 51, 96, 55, 99, 59, 105, 65, 104, 66, 127, 88, 116, 97, 117, 98, 115, 101, 114, 100, 112, 101, 110, 103, 109, 104, 108, 105, 104, 108, 97, 114, 94, 110, 92, 113, 87, 115, 86, 113, 80, 107, 78, 105, 81, 102, 84, 99, 86, 93, 85, 92, 84, 90, 85, 89, 83, 87, 83, 87, 83, 86"></area>
        <area id="promzona" href="#" title="Промзона" alt="Промзона" shape="poly" 
                                class="{strokeColor:’000000′, strokeWidth:1, fillColor:’ff0000′, fillOpacity:0.6}"
                                coords="99, 59, 96, 55, 92, 51, 95, 49, 96, 48, 99, 46, 102, 39, 105, 31, 112, 34, 115, 34, 116, 31, 120, 31, 124, 36, 123, 37, 124, 38, 125, 39, 125, 40, 125, 41, 132, 44, 134, 44, 136, 45, 135, 50, 136, 58, 144, 58, 154, 58, 158, 59, 160, 60, 162, 63, 163, 64, 165, 73, 165, 73, 166, 75, 166, 76, 166, 77, 166, 77, 166, 79, 165, 82, 165, 83, 165, 83, 165, 84, 166, 84, 166, 85, 166, 86, 167, 87, 167, 88, 166, 90, 165, 90, 165, 90, 165, 91, 165, 91, 164, 92, 163, 93, 163, 93, 162, 94, 161, 95, 161, 95, 160, 95, 159, 95, 158, 96, 158, 96, 157, 96, 156, 97, 156, 97, 155, 97, 154, 96, 154, 95, 151, 94, 144, 91, 141, 89, 140, 88, 139, 86, 131, 85, 127, 88, 126, 88, 115, 77, 109, 71, 104, 66, 105, 65"></area>
…
</map>

тема на форуме

Последние записи

Интерактивная карта на сайте

Похожие статьи

Купить рекламу на сайте за 1000 руб

пишите сюда - alarforum@yandex.ru