@shmdarya

Интерактивная карта JQVMap. Как сделать подсветку нескольких регионов?

Здравствуйте!
Помогите пожалуйста реализовать функционал подсветки нескольких регионов при наведении на ссылку, находящейся на странице.
Также, чтобы при наводке на регион подсвечивался нужный регион из списка. Сейчас работает только если навести курсор на ссылку в списке.
Помогите пожалуйста, с ног сбилась уже(
  • Вопрос задан
  • 695 просмотров
Пригласить эксперта
Ответы на вопрос 2
Stalker_RED
@Stalker_RED
Я не смотрел что там за JQVMap, но вообще ничего сложного же:
https://jsfiddle.net/Stalk/jarsv6o4/

В вашей библиотеке скорее всего предусмотрены методы для подсветки.
Ответ написан
Комментировать
Мой метод не претендует на то чтобы в библиотеке было объявлено официально что делать нужно именно так, тем не менее я так сделал:

setTimeout(function (){
$("#jqvmap1_iv").attr("fill","red");
}, 1000);

Создаём задержку в 1 секунду перед закраской Ивановской области на карте России(не легитимной). Далее изем элемент по Id = #jqvmap1_iv и устанавливаем атрибут fill в red(красный цвет заливки). Если без задержки то не выделяется из за асинхронной работы JavaScript, то есть к моменту когда производится попытка выделения карта ещё не успела сгенерироваться браузером. Думаю что у библиотеки есть стандартный метод выделения областей. Тоже бы узнал как именно предлагается это делать в официальной библиотеке.

Так делал на карте только по России.

То есть по коду в демке что прилагается к библиотеке выглядит так:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>JQVMap - Russia Map</title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">

    <link href="../dist/jqvmap.css" media="screen" rel="stylesheet" type="text/css"/>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../dist/jquery.vmap.js"></script>
    <script type="text/javascript" src="../dist/maps/jquery.vmap.russia.js" charset="utf-8"></script>

      <script>
      jQuery(document).ready(function () {
        jQuery('#vmap').vectorMap({
          map: 'russia_en',
          backgroundColor: 'blue',
          color: '#ffffff',
          hoverOpacity: 0.7,
          selectedColor: '#999999',
          enableZoom: true,
          showTooltip: true,
          scaleColors: ['#C8EEFF', '#006491'],
          normalizeFunction: 'polynomial'
        });
      });
	  setTimeout(function (){$("#jqvmap1_iv").attr("fill","red");}, 1000);
    </script>
  </head>
  <body>
    <div id="vmap" style="width: 300px; height: 200px;"></div>
  </body>
</html>
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы