gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-29 21:20:36 27 4
gpt4 key购买 nike

您好,我正在使用 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");

如果有人帮助我谢谢。

最佳答案

当调用onMarkerTipShow()时,codeindex,但是markers不在范围内.您需要处理 map 中的 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");
}

关于javascript - JVector Map 如何在标记悬停时有动态图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38672204/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com