2015-01-29 21 views
5

Bu jVectorMap kullanıyorum. Varsayılan olarak, ipucu üzerinde araç ipucunu gösterir. . Sadece tıklama üzerine (kısmen çalışan ancak ipucu fare imleci üzerinde olması gerekir ben nasıl çözemedimAraç ipucu yalnızca jVectorMap'te bir bölgeye tıklandığında açılır ve açılır?

  1. göster ipucu - İşte

    elde etmek çalışıyorum budur fare imleç konumu.)
  2. Kullanıcı numaralı bağlantıyı tıklatıncaya kadar araç ipucu açılır.

Kodu: 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(); 
    } 
}); 

Desire Davranış

enter image description here

+0

Varsayılan işlevin, her vurgunun üzerindeki araç ipucu içeriğini değiştirmek olduğunu fark etmelisiniz. – Nit

cevap

8

ben istediğiniz şekilde çalışma var ve keman güncelleme: 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; 
} 
+0

Cevabınız için teşekkür ederiz. Seçilen durumu (bölge) vurgulamak mümkün mü? – Win

+0

Evet, öyle. Güncellenmiş yanıtıma bir bakın ve keman. –

+0

Serin ipucu: 'onRegionTipShow 'kısmı, herhangi bir özellik veya stil ile uğraşmadan varsayılan araç ipucu görüntüleme işlevini önlemek için kullanılabilir. – jxmorris12

1

Sen dolgu veya kontur parametreleri ile seçili bölgeyi vurgulayabilirsiniz. Daha fazla detay jVectorMap belgelerinde bulunabilir. Kısa bir örnek:

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