如何仅当在 jVectorMap 中单击区域时才显示工具提示，并让它打开？

Question

我正在使用这个 jVectorMap。默认情况下，它会在悬停时显示工具提示。

这是我想要实现的目标 -

仅显示工具提示单击 （部分有效，但工具提示应位于鼠标光标上方。我不知道如何获取鼠标光标位置.)
让工具提示打开，直到用户明确单击关闭。

$('#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();
    }
});

期望行为

Answer 1

我按照你想要的方式工作并更新了你的fiddle：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;
}

Answer 2

您可以通过填充或描边参数突出显示所选区域。可以在 jVectorMap 的文档中找到更多详细信息。这里有一个简短的例子：

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

如何仅当在 jVectorMap 中单击区域时才显示工具提示，并让它打开？

How to show tooltip only if a region is clicked in jVectorMap, and let it open?

javascript

jquery

jvectormap