JVector映射标记悬停时如何获得动态图像 [英] JVector Map how to have dynamic images when markers hover

问题描述

您好我正在使用 JVector Map 我之前可能会问过我的问题，而且我发现这篇文章 jvectormap标记标签图片但我的问题仍未解决

Hi I'm using JVector Map and I know my question maybe asked before , and also I found this article jvectormap markers label image too but my problem still not solved

我想要显示图片对于鼠标悬停时显示的工具提示中的每个标记

I want to show a picture for each marker in the tool-tip which it shows when mouse hover's it

这里是我的代码：

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


});

这个系数工作正常

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

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

but by the guide in that article I used this one insted because I need diffrent pictures and it doesn't work .

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

如果有人帮我谢谢，请申请。

Appricate if some one help me thanks.

推荐答案

当调用 onMarkerTipShow（）时，代码是 index ，但 markers 不在范围内。您需要获取地图中标记的句柄：

When onMarkerTipShow() is invoked, the code is the index, but markers are not in scope. You need to get a handle on the markers in the map:

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映射标记悬停时如何获得动态图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！