我正在尝试在标记的滚动状态中添加两条不同的信息。在 markers.html
中,我为每个城市添加了一些数字,但我希望这些数字的样式与城市名称不同。
如何向标签添加 html 标记。我能够通过在 world-map.js
中添加另一条路径来添加数字:
this.container.delegate("[class~='jvectormap-element']", 'mouseover mouseout', function(e){
var path = this,
type = jvm.$(this).attr('class').indexOf('jvectormap-region') === -1 ? 'marker' : 'region',
code = type == 'region' ? jvm.$(this).attr('data-code') : jvm.$(this).attr('data-index'),
element = type == 'region' ? map.regions[code].element : map.markers[code].element,
labelText = type == 'region' ? map.mapData.paths[code].name : (map.markers[code].config.name || ''),
labelShowEvent = jvm.$.Event(type+'LabelShow.jvectormap'),
overEvent = jvm.$.Event(type+'Over.jvectormap');
var path2 = this,
type = jvm.$(this).attr('class').indexOf('jvectormap-region') === -1 ? 'marker' : 'region',
code = type == 'region' ? jvm.$(this).attr('data-code') : jvm.$(this).attr('data-index'),
element = type == 'region' ? map.regions[code].element : map.markers[code].element,
labelNumber = type == 'region' ? map.mapData.paths[code].number : (map.markers[code].config.number || ''),
labelShowEvent = jvm.$.Event(type+'LabelShow.jvectormap'),
overEvent = jvm.$.Event(type+'Over.jvectormap');
if (e.type == 'mouseover') {
map.container.trigger(overEvent, [code]);
if (!overEvent.isDefaultPrevented()) {
element.setHovered(true);
}
if(labelNumber!= undefined){
map.label.text(labelText+ " " +labelNumber);
}
else{
map.label.text(labelText);
}
map.container.trigger(labelShowEvent, [map.label, code]);
if (!labelShowEvent.isDefaultPrevented()) {
map.label.show();
map.labelWidth = map.label.width();
map.labelHeight = map.label.height();
}
}
else {
element.setHovered(false);
map.label.hide();
map.container.trigger(type+'Out.jvectormap', [code]);
}
});
这是我在 markers.html 中的结构:
var markers = [
{latLng: [33.57, -86.75], name: 'Birmingham,AL', number: '$34,000'},
{latLng: [35.22, -92.38], name: 'Little Rock,AR', number: '$34,000'},
],
最佳答案
为什么不直接使用 API:
$('#map').vectorMap({
...
onMarkerTipShow: function(e, label, code){
label.html('Anything you want');
//or do what you want with label, it's just a jQuery object
}
...
});
关于javascript - jvectormap 标签 html 标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13253684/