Как показать всплывающую подсказку, только если область щелкнута в jVectorMap, и позволить ей открыться?

Я использую этот jVectorMap. По умолчанию он показывает всплывающую подсказку при наведении.

Вот чего я пытаюсь добиться -

  1. Показывать всплывающую подсказку только при нажатии (частично работает, но всплывающая подсказка должна быть над курсором мыши. Я не мог понять, как получить положение курсора мыши.)
  2. Пусть всплывающая подсказка открывается до тех пор, пока пользователь явно не нажмет закрыть.

Код: jsfiddle

$('#map').vectorMap({
    map: "us_aea_en",
    backgroundColor: "transparent",
    regionStyle: {
        initial: {
            fill: "#818486"
        }
    },
    onRegionClick: function (e, code) {
        var map = $('#map').vectorMap('get', 'mapObject');        
        map.tip.show();
        map.tip.html(code + "<p>Click to Close</p>");
    },
    onRegionTipShow: function (e, tip, code) {
        e.preventDefault();
    }
});

Поведение желания

введите здесь описание изображения


javascript jquery jvectormap
person Win    schedule 29.01.2015    source источник
comment
Вы должны начать с того, что функциональность по умолчанию заключается в изменении содержимого всплывающей подсказки при каждом наведении.   -  person Etheryte    schedule 30.01.2015

Ответы (2)


arrow_upward
9
arrow_downward

Я заставил его работать так, как вы хотите, и обновил вашу скрипку: http://jsfiddle.net/inanda/ufhz316z /5/

JavaScript

 $('#map').vectorMap({
    map: "us_aea_en",
    backgroundColor: "transparent",
    regionsSelectable: true,
    regionsSelectableOne: true,
    regionStyle: {
        initial: {
            fill: "#818486"
        },
        selected: {
            fill: "#C0C0C0"
      }
    },
    onRegionClick: function (e, code) {
        var map = $('#map').vectorMap('get', 'mapObject');
        var customTip=$('#customTip');

        customTip.css({
          left: left,
          top: top
        })

        customTip.html(map.tip.text());
      customTip.show();
      customTip.append(code + "<p>Click to Close</p>");
        customTip.children("p").click(function(){
            map.clearSelectedRegions();
           customTip.hide(); 
        }) 

    },
    onRegionTipShow: function (e, tip, code) {
        e.preventDefault();
    }
});

var left,top;
$('#map').vectorMap('get', 'mapObject').container.mousemove(function(e){
   left = e.pageX - 40;
   top = e.pageY - 60;

});

HTML

<div id="map"></div>
<div id="x"></div>
<div id="y"></div>
<div id="customTip" class="jvectormap-tip"></div>

CSS

#map {
    width: 500px;
    height: 400px;
}
person Inanda Menezes    schedule 03.02.2015
comment
Спасибо за ответ. Можно ли выделить выбранный штат (регион)? - person Win; 04.02.2015
comment
Да это так. Взгляните на мой обновленный ответ и скрипку. - person Inanda Menezes; 04.02.2015
comment
Полезный совет: часть onRegionTipShow можно использовать для предотвращения функции отображения всплывающей подсказки по умолчанию, не связываясь с какими-либо атрибутами или стилями. - person jxmorris12; 27.09.2016

arrow_upward
1
arrow_downward

Вы можете выделить выбранную область с помощью параметров заливки или обводки. Более подробную информацию можно найти в документации jVectorMap. Вот краткий пример:

regionStyle: {
   selected: {
      stroke: '#000',
      "stroke-width": 1.3,
      "stroke-opacity": 1
   }
},
person Unkown    schedule 04.02.2015