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

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

пример: http://www.todospelaeducacao.org.br/ http://code.google.com/p/svg2imap/

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

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

29
imagemap jquery-svg mapping svg

11 ответов

jQuery плагин для украшения карты изображений (основные моменты, выберите области, подсказки):

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

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

41

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

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

21

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

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

  1. создать новую страницу HTML5
  2. создайте новый файл SVG, каждая кликабельная область (провинция) должна быть отдельным многоугольником SVG в вашем файле SVG, (Я использую Adobe Illustrator для создания SVG-файлов, но вы также можете найти много альтернативных программных продуктов, например Inkscape)
  3. добавить наведение мыши и нажмите события на полигоны один за другим 
    <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" 
    onmouseover="mouseOverHandler(evt)"
    onclick="clickHandler(evt)" />
  4. добавьте обработчик для каждого события в код JavaScript и добавьте нужный код в обработчик 
    function mouseOverHandler(evt) {};
function clickHandler(evt) {};
  5. добавьте файл SVG на свою HTML-страницу (Я предпочитаю встроенный SVG, но вы также можете использовать связанный файл SVG)
  6. загрузите файлы на свой сервер

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

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

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

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

4

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

интерактивные карты CSS

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

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

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

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

1

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

1

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

1

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

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

источник

0

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

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

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

0

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

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

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

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

-1

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

сильный текст

-2