Советы и рекомендации по реализации веб-интерфейса javascript с использованием карт изображений HTML

Я хотел бы получить несколько советов и приемов для реализации веб-интерфейса с JavaScript, который позволил бы пользователям нажимать на некоторые предопределенные регионы на карте и возвращал список выбранных регионов при нажатии на кнопку отправки. Затем этот список будет отправлен на сервер (для этого я могу использовать метод HTTP "post").

  1. Первый вопрос: как определить регионы на карте. Я много думал о картах изображений в формате HTML, но это кажется громоздким, так как мне придется извлекать координаты каждой области. Мне было интересно, будут ли они автоматически генерировать этот список из изображения?

  2. Второй вопрос: как сохранить список выбранных регионов, чтобы я мог отправить его на сервер, когда пользователь нажимает кнопку отправки. Я не слишком хорошо знаком с JavaScript, так что, вероятно, это будет легко для опытных программистов JavaScript ;-)

Спасибо


javascript html jquery imagemap
person atownmath    schedule 19.08.2010    source источник

Ответы (3)


arrow_upward
0
arrow_downward

  1. Вы можете использовать одну из множества программ для создания карт изображений или найти утилиту, которая сделает это за вас: q=Image+Tracing+OR+trace+"Image+MAP"+OR+imagemap

  2. Скрытое поле в форме можно обновить с помощью

    [область onclick="document.forms[0].clicked.value+=',region3'" ... />

    [область onclick="document.forms[0].clicked.value+=',region4'" ... />

    [форма onsubmit="var val = this.clicked.value; если (val) this.clicked.value=val.substring(1)">

    [тип ввода = "скрытое" имя = "нажатое" значение = "" />

где скрипт удаляет ведущую запятую

Пожалуйста, измените [ на ‹ - SO доставляет мне неприятности с приведенным выше кодом

person mplungjan    schedule 19.08.2010
comment
Эти программы создания карт обычно используют изображение SVG в качестве входных данных: stackoverflow.com/questions/3320952/ - person atownmath; 19.08.2010

arrow_upward
0
arrow_downward

  1. Это зависит от того, откуда вы берете карты. Есть ли общедоступный API? В общем, я бы сказал, что их придется добавлять вручную. Чтобы помочь вам, вы можете создать интерфейс, который сделает это за вас проще, т.е. вы перетаскиваете маленькую рамку вокруг определенной области, затем вы можете ввести ее данные, такие как округ, код города и т. д.

  2. Сохраните регионы как двухмерный массив. map[x][y].town = 'uxbridge' затем делегируйте прослушиватель событий изображению. Узнайте координаты x, y, по которым была нажата мышь, прокрутите массив карт, чтобы увидеть, совпадают ли они. Пользователю нужно будет щелкнуть точку в 1 пиксель, чтобы ее можно было найти в массиве, поэтому, чтобы избежать этого, просто используйте значение «промежутка», скажем, 50 пикселей, поэтому x, y может быть 50 пикселей в любом случае. Затем выделите эту область и добавьте ее в массив регионов. Вероятно, есть лучший способ сделать это с помощью <map> и лучшего алгоритма для поиска в массиве map[], но в конечном итоге вам придется преобразовать каждый элемент в массиве map[] в <area>, что в любом случае было бы громоздким.

На самом деле выбросьте это, <map><area> было бы намного проще и подходило для этого. Самая большая проблема здесь заключается в том, чтобы понять, как получить регионы, хранящиеся в массиве map[], опять же, это пункт 1 и все о API, который вы можете использовать, или добавить их вручную через интерфейс. Затем вы перебираете массив и выводите его каждому с его координатами x, y, w, h в area и после завершения нажимаете на DOM. Затем добавьте прослушиватель событий к каждому OR, если вы хотите быть намного более эффективным, делегируйте прослушиватель событий на <map> для обработки событий по щелчку. Затем вы просто извлекаете данные из массива map[] для этого элемента области.

person Gary Green    schedule 19.08.2010
comment
Спасибо за вашу помощь. Нет публичного API или чего-то еще. На самом деле я определяю свои собственные регионы (они не соответствуют странам или каким-либо подразделениям внутри страны). Я нашел несколько скриптов для автоматического преобразования SVG в карту изображений (см. wikipedia" title="как автоматически создавать карты изображений серых карт из wikipedia"> stackoverflow.com/questions/3320952/), поэтому я посмотрю, смогу ли я преобразовать изображение png, содержащее метки регионов, в SVG изображение. - person atownmath; 19.08.2010

arrow_upward
0
arrow_downward

Я попробовал скрипт maphilight (http://davidlynch.org/js/maphilight/), и он работает довольно хорошо, но, похоже, потребляет много процессорного времени при использовании карт со многими областями (у меня около 10000 областей). Будет ли способ исправить это?

Кстати, улучшенная версия этого скрипта доступна здесь: http://formidablo.nl/jquery/

person atownmath    schedule 25.08.2010