JVector Map 如何在标记悬停时有动态图像

Question

您好，我正在使用 JVector Map，我知道我的问题之前可能有人问过，而且我也找到了这篇文章 jvectormap markers label image，但我的问题仍然没有解决

我想在工具提示中为每个标记显示一张图片，鼠标悬停时它会显示该图片

这是我的代码：

$('#world-map').vectorMap({
    map: 'world_mill',
    backgroundColor: '#fff',
    zoomOnScroll: false,
    regionStyle:{
        initial: {
            fill: '#878787',
            "fill-opacity": 1,
            stroke: '#fff',
            "stroke-width": 1,
            "stroke-opacity": 1
        },
        hover: {
            "fill-opacity": 1,
            cursor: 'pointer',
            fill: '#133060'

        },
        selected: {
            fill: 'yellow'
        },
    },
    markerStyle: {
        initial: {
            fill: '#F8E23B',
            stroke: '#383f47',
            "stroke-width": 3,
            r: 10
        }
    },

  markers: [
  { latLng: [61.524010, 105.318756], name: 'FT 1', imgsrc: 'team1.jpg' },
  { latLng: [60.128161, 18.643501], name: 'FT 2', imgsrc: 'team2.jpg' },
  { latLng: [35.861660, 104.195397], name: 'FT 3', imgsrc: 'team3.jpg' },
  { latLng: [37.090240, -95.712891], name: 'FT 4', imgsrc: 'team4.jpg' },
 { latLng: [56.130366, -106.346771], name: 'FT 5', imgsrc: 'team5.jpg' },
  { latLng: [-25.274398, 133.775136], name: 'FT 6', imgsrc: 'team6.jpg' },
  { latLng: [51.165691, 10.451526], name: 'FT 7', imgsrc: 'team7.jpg' },

  ],

  onRegionTipShow: function (e, el, code) {

      el.html(el.html() + '<p id="popop"></p>').css("fontSize","15px");
  },
  onMarkerTipShow: function (e, el, code) {

      el.html(el.html() + '<br /><img src="../Content/img/' + markers[index].imgsrc + '"/>').css("fontSize", "15px");

      //el.html(el.html() + '<br /><img src="../Content/img/' + "team1.jpg" + '"/>').css("fontSize", "15px");
  },


});

有了这个 coe 就可以正常工作了

el.html(el.html() + '<br /><img src="../Content/img/' + "team1.jpg" + '"/>').css("fontSize", "15px");

但是根据那篇文章中的指南，我使用了这个，因为我需要不同的图片并且它不起作用。

el.html(el.html() + '<br /><img src="../Content/img/' + markers[index].imgsrc + '"/>').css("fontSize", "15px");

如果有人帮助我，谢谢。

Answer 1

当调用 onMarkerTipShow() 时，code 是 index，但 markers 不在范围内。您需要获取地图中 markers 的句柄：

onMarkerTipShow: function (e, el, code) {
      var markers = $('#world-map').vectorMap('get', 'mapObject').markers;  
      el.html(el.html() + '<br /><img src="../Content/img/' 
         + markers[code].config.imgsrc 
         + '"/>').css("fontSize", "15px");
  }

JVector Map 如何在标记悬停时有动态图像

JVector Map how to have dynamic images when markers hover

javascript

jquery

jvectormap