Создайте карту с интерактивными областями/состояниями, использующими SVG, HTML/CSS, ImageMap

Ответ 1

Плагин jQuery для оформления карт изображений (подсветка, выделение областей, всплывающих подсказок):

http://www.outsharked.com/imagemapster/

Раскрытие: я написал это.

Ответ 2

Похоже, вы хотите простую карту изображений, я бы рекомендовал не делать ее более сложной, чем она должна быть. Здесь статья о о том, как улучшить образ изображений с помощью svg. Очень легко сделать кликируемые области в svg, просто добавьте некоторые элементы <a> вокруг фигур, которые вы хотите кликать.

Несколько вариантов, если вам нужно что-то более продвинутое:

• http://jqvmap.com/
• http://jvectormap.com/
• http://polymaps.org/

Ответ 3

Я думаю, что лучше разделить мой ответ на две части:

A. Создайте все с нуля (используя SVG, JavaScript и HTML5):

• Создайте новую страницу HTML5
• Создайте новый SVG файл, каждая область с кликами (провинция) должна быть отдельным SVG-полигоном в вашем SVG файле, (Я использую Adobe Illustrator для создания SVG файлов, но вы также можете найти много альтернативных программных продуктов, например Inkscape)
• Добавить мыши и щелкнуть события на ваши многоугольники один за другим

  <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" 
      onmouseover="mouseOverHandler(evt)"
      onclick="clickHandler(evt)" />
  

• Добавить обработчик для каждого события в вашем JavaScript-коде и добавить желаемый код в обработчик

  function mouseOverHandler(evt) {};
  function clickHandler(evt) {};
  

• Добавьте SVG файл на HTML-страницу (я предпочитаю встроенный SVG, но вы также можете использовать связанный файл SVG)
• Загрузите файлы на сервер

B -Используйте программное обеспечение, например FLDraw Interactive Image Creator (только если у вас есть изображение карты и вы хотите чтобы сделать его интерактивным):

• Создайте пустой проект и выберите свое изображение карты в качестве основного изображения при создании нового проекта.
• Добавить элемент Polygon (из меню Shape) для каждой провинции
• Для каждого многоугольника дважды щелкните его, чтобы открыть окно "Свойства", в котором вы можете выбрать тип события для мыши и щелкнуть, также измените непрозрачность формы на 0, чтобы сделать ее невидимой.
• Сохраните проект и опубликуйте его в HTML5, FLDraw создаст новую папку, содержащую все необходимые файлы для вашего проекта, которые вы можете загрузить на свой сервер.

Вариант (A) очень хорош, если вы программист или у вас есть кто-то для создания необходимого кода и SVG файла для вас, Вариант (B) хорош, если вы не хотите нанимать кого-то или тратить свое время на создание всего с нуля

У вас есть и другие варианты, например, с использованием HTML5 Canvas вместо SVG, но создавать карту с масштабированием можно с помощью HTML5 Canvas, возможно, есть и другие способы, о которых я не знаю.

Ответ 4

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

Clickable CSS Maps

Одна заметка для большего количества скриптов на сайте: у меня были некоторые неприятные проблемы с работой над картой (работающей графическим меню) в Drupal 7. Там, где использовалось много других script и после их обработки, я застрял с картой - он все равно не работал, хотя jquery.cssmap.js, CSS (как локальный), так и script в том месте, где он находится в нужном месте. Firebug показал мне ошибку, и я вдруг eureka - простой надзор, я оставил код script, как и в этом примере, и возник конфликт. Просто измените переднюю функцию "$" на "jQuery" (или другой обработчик), и она отлично работает.:]

Вот что я могу сказать (конечно, вы можете поставить его раньше, чем):

<script type="text/javascript">
      jQuery(function($){
        $('#map-country').cssMap({'size' : 810});
       });
    </script>

Ответ 5

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

Ответ 6

Я использовал makeaclickablemap для своих провинциальных карт в течение некоторого времени, и оказалось, что это действительно хорошо подходит.

Ответ 7

У меня были те же требования, и, наконец, этот Конвертер карт работал у меня. Это лучший плагин для любого поколения карт.

Ответ 8

Следующий код может помочь вам:

$("#svgEuropa [id='stallwanger.it.dev_shape_DEU']").on("click",function(){
    alert($(this).attr("id"));
});

Источник

Ответ 9

Вот еще один плагин карты изображений, который я написал для улучшения карт изображений: https://github.com/gestixi/pictarea

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

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

Ответ 10

У вас есть несколько вариантов для этого:

1 - Если вы можете найти файл SVG для нужной вам карты, вы можете использовать что-то вроде RaphaelJS или SnapSVG, чтобы добавить клики для ваших состояний/регионов, это решение является самым настраиваемым...

2 - Вы можете использовать специальные инструменты, такие как clickablemapbuilder (бесплатно) или makeaclickablemap (я думаю, также бесплатно).

[отказ от ответственности] Im автор clickablemapbuilder.com:)

Ответ 11

<script type="text/javascript">
      jQuery(function($){
        $('#map-country').cssMap({'size' : 810});
       });
    </script>