使用jVectorMap将标记标签更改为多行
Using jVectorMap change the marker label to be multi-line
我正试图使用jVectorMap的库来绘制旁边有标签的不同标记。
我遇到的问题是标签下的render
函数,我试图在数组上循环并将其添加到名称中。不幸的是,它将解析后的HTML以文本形式放入标签,而不是HTML。
labels: {
markers: {
render: function(index) {
var markerStr = "";
markerStr += currentMarkers[index].name;
$.each(currentMarkers[index].divisions, function(index, currentDivision) {
markerStr += currentDivision + "<br>";
});
return $.parseHTML(markerStr);
},
offsets: function(index) {
return currentMarkers[index].offsets || [0, 0];
}
}
}
我做了一个代码笔的例子,这样你就可以看到我在说什么。
不同变量:
var allMarkers = [{
latLng: [43.831997, 11.204543],
name: 'Location A',
country: 'IT',
divisions: ["AAAAAAA", "BBBBBBBBB"]
}, {
latLng: [40.537014, -3.636961],
name: 'Location B',
country: 'ES',
divisions: ["R & D", "BBBBBBBBBB", "AAAAAAAA"]
}, {
latLng: [53.409245, -2.990841],
name: 'Location C',
country: 'GB',
divisions: ["BBBBBBBBB"]
}, {
latLng: [51.375644, -0.677483],
name: 'Location D',
country: 'GB',
offsets: [-4, -8],
divisions: ["CCCCCCCC"]
}, {
latLng: [51.266658, -1.093064],
name: 'Location E',
country: 'GB',
offsets: [-100, 5],
divisions: ["DDDDDDD"]
}, {
latLng: [51.196622, -0.393301],
name: 'Location F',
country: 'GB',
divisions: ["CCCCCC"]
}, {
latLng: [50.226984, 8.615192],
name: 'Location G',
country: 'DE',
divisions: ["DDDDDDDDD"]
}, {
latLng: [51.896741, -8.487941],
name: 'Location H',
country: 'IE',
offsets: [-3, -10],
divisions: ["FFFFFFFFFF", "EEEEEEEEEEE"]
}, {
latLng: [53.350129, -6.263215],
name: 'Location I',
country: 'IE',
offsets: [-60, 0],
divisions: ["EEEEEEEE"]
}, {
latLng: [51.706063, -8.522351],
name: 'Location J',
country: 'IE',
offsets: [-66, 2],
divisions: ["BBBBBBBBB"]
}, {
latLng: [48.884578, 2.269055],
name: 'Location K',
country: 'FR',
offsets: [0, -3],
divisions: ["GGGGGGGGG"]
}, {
latLng: [48.489941, 7.678864],
name: 'Location L',
country: 'FR',
divisions: ["HHHHHHHHH"]
}];
var currentMarkers = allMarkers.slice();
var highlightedCountries = ['GB', 'IT', 'ES', 'FR', 'DE', 'IE'];
代码:
var mapObj = new jvm.Map({
container: $('#map'),
map: 'europe_mill',
focusOn: {
x: 0.5,
y: 0.6,
scale: 2
},
markerStyle: {
initial: {
fill: '#fff',
stroke: '#383f47'
}
},
regionStyle: {
hover: {
"fill-opacity": .6,
}
},
onRegionTipShow: function(e, el, code) {
if (highlightedCountries.indexOf(code) > -1) {
$('.jvectormap-tip').removeClass('hidden');
} else {
$('path[data-code="' + code + '"]').attr('fill-opacity', 1).attr('cursor', 'default');
$('.jvectormap-tip').addClass('hidden');
}
},
backgroundColor: '#d0e7f7',
markers: currentMarkers,
series: {
regions: [{
values: {
GB: '#cecece',
IT: '#cecece',
ES: '#cecece',
FR: '#cecece',
DE: '#cecece',
IE: '#cecece'
}
}]
},
labels: {
markers: {
render: function(index) {
var markerStr = "";
markerStr += currentMarkers[index].name;
$.each(currentMarkers[index].divisions, function(index, currentDivision) {
markerStr += currentDivision + "<br>";
});
return $.parseHTML(markerStr);
},
offsets: function(index) {
return currentMarkers[index].offsets || [0, 0];
}
}
},
onMarkerTipShow: function(e, label, code) {
var labelStr = "";
$.each(currentMarkers[code].divisions, function(index, currentDivision) {
labelStr += currentDivision + "<br>";
});
label.html(labelStr);
},
zoomOnScroll: false
});
好的,这里有一个答案,它允许您使用tspan在标签中添加中断,这些中断可以包含在svgs:中
$(document).ready(function() {
变量:
var allMarkers = [{
latLng: [43.831997, 11.204543],
name: 'Location A',
country: 'IT',
divisions: ["AAAAAAA", "BBBBBBBBB"]
}, {
latLng: [40.537014, -3.636961],
name: 'Location B',
country: 'ES',
divisions: ["R & D", "BBBBBBBBBB", "AAAAAAAA"]
}, {
latLng: [53.409245, -2.990841],
name: 'Location C',
country: 'GB',
divisions: ["BBBBBBBBB"]
}, {
latLng: [51.375644, -0.677483],
name: 'Location D',
country: 'GB',
offsets: [-4, -8],
divisions: ["CCCCCCCC"]
}, {
latLng: [51.266658, -1.093064],
name: 'Location E',
country: 'GB',
offsets: [-100, 5],
divisions: ["DDDDDDD"]
}, {
latLng: [51.196622, -0.393301],
name: 'Location F',
country: 'GB',
divisions: ["CCCCCC"]
}, {
latLng: [50.226984, 8.615192],
name: 'Location G',
country: 'DE',
divisions: ["DDDDDDDDD"]
}, {
latLng: [51.896741, -8.487941],
name: 'Location H',
country: 'IE',
offsets: [-3, -10],
divisions: ["FFFFFFFFFF", "EEEEEEEEEEE"]
}, {
latLng: [53.350129, -6.263215],
name: 'Location I',
country: 'IE',
offsets: [-60, 0],
divisions: ["EEEEEEEE"]
}, {
latLng: [51.706063, -8.522351],
name: 'Location J',
country: 'IE',
offsets: [-66, 2],
divisions: ["BBBBBBBBB"]
}, {
latLng: [48.884578, 2.269055],
name: 'Location K',
country: 'FR',
offsets: [0, -3],
divisions: ["GGGGGGGGG"]
}, {
latLng: [48.489941, 7.678864],
name: 'Location L',
country: 'FR',
divisions: ["HHHHHHHHH"]
}];
var currentMarkers = allMarkers.slice();
var highlightedCountries = ['GB', 'IT', 'ES', 'FR', 'DE', 'IE'];
代码
var mapObj = new jvm.Map({
container: $('#map'),
map: 'europe_mill',
focusOn: {
x: 0.5,
y: 0.6,
scale: 2
},
markerStyle: {
initial: {
fill: '#fff',
stroke: '#383f47'
}
},
regionStyle: {
hover: {
"fill-opacity": .6,
}
},
onRegionTipShow: function(e, el, code) {
if (highlightedCountries.indexOf(code) > -1) {
$('.jvectormap-tip').removeClass('hidden');
} else {
$('path[data-code="' + code + '"]').attr('fill-opacity', 1).attr('cursor', 'default');
$('.jvectormap-tip').addClass('hidden');
}
},
backgroundColor: '#d0e7f7',
markers: currentMarkers,
series: {
regions: [{
values: {
GB: '#cecece',
IT: '#cecece',
ES: '#cecece',
FR: '#cecece',
DE: '#cecece',
IE: '#cecece'
}
}]
},
labels: {
markers: {
render: function(index) {
var markerStr = "";
markerStr += '<tspan dy="0em">' + currentMarkers[index].name + "</tspan>";
$.each(currentMarkers[index].divisions, function(index, currentDivision) {
markerStr += '<tspan style="font-weight:100;font-style:italic;" dy="1.2em">' + currentDivision + "</tspan>";
});
nextTick(fixMarkers);
return markerStr;
},
offsets: function(index) {
return currentMarkers[index].offsets || [0, 0];
}
}
},
zoomOnScroll: false
});
$('#map').on('click', function(event) {
mapObj.removeAllMarkers();
currentMarkers = [];
resetCountryColors(highlightedCountries);
var countryCode = $(event.target).attr('data-code');
if (highlightedCountries.indexOf(countryCode) > -1) {
$(event.target).css('fill', '#d52b1e');
for (var i = 0; i < allMarkers.length; i++) {
if (countryCode == allMarkers[i].country) {
currentMarkers.push(allMarkers[i]);
}
}
mapObj.addMarkers(currentMarkers, []);
}
mapObj.updateSize();
});
$(window).resize(function() {
mapObj.updateSize();
fixMarkers();
});
$('.jvectormap-container').mousemove(fixMarkers).swipe({
swipeStatus: fixMarkers
});
});
function resetCountryColors(chosenCountries) {
$.each(chosenCountries, function(index, currentCountry) {
$('.jvectormap-element[data-code="' + currentCountry + '"]').css('fill', '#cecece');
});
}
function fixMarkers() {
$('text.jvectormap-marker').each(function() {
var $this = $(this);
var text = $this.text();
if (text.indexOf('</tspan>') !== -1) {
$this.html(text);
}
$this.find('tspan').each(function() {
$(this).attr('x', $this.attr('x'));
});
});
}
function nextTick(cb) {
if (typeof window.Promise === 'function') {
Promise.resolve().then(cb);
} else if (typeof window.setImmediate === 'function') {
setImmediate(cb);
} else {
setTimeout(cb, 0);
}
}
特别要注意以下代码,它将tspans
放入代码中
markerStr += '<tspan dy="0em">' + currentMarkers[index].name + "</tspan>";
$.each(currentMarkers[index].divisions, function(index, currentDivision) {
markerStr += '<tspan style="font-weight:100;font-style:italic;" dy="1.2em">' + currentDivision + "</tspan>";
});
nextTick(fixMarkers);
return markerStr;
以及将tspans
转换为HTML的fixMarkers
函数。
这是一个工作示例
找到了一个简单的方法:
onMarkerLabelShow: function(event, label, code) {
var mySplitResult = label.html().split("'r'n");
label.html("");
for(i = 0; i < mySplitResult.length; i++){
if (i == mySplitResult.length-1){label.html( label.html() + mySplitResult[i]); } else{label.html( label.html() + mySplitResult[i] + "<br />"); }
}
}
相关文章:
- 在<页眉>标签
- Ckeditor-plugin:插入虚假元素add不情愿<p>标签前后
- iframe正在添加标签,需要删除它们
- 如何自动调整标签的高度以适应内容
- Jquery标签插件粘贴问题
- Twitter引导程序Typeahead-Id&标签
- Highcharts-如何在自定义格式化程序中获得默认的y轴标签格式化程序
- Morris.js折线图x轴标签在调整大小后消失
- JavaScript goto 标签如何使用内部循环
- 显示某个用户ID的某个标签的30张Instagram图片
- 标签客户端的设置值
- 谷歌图表显示所有标签
- 如何在图片和边缘之间居中设置标签
- 在Datatables中设置本地化后,需要更改标签文本
- 第二组标签及其内容赢得'默认情况下t加载
- 在一个javascript文件中为整个网站创建标签
- 使用jVectorMap将标记标签更改为多行
- 可以't使用Jvectormap渲染区域标签
- jvectormap标记标签图像
- 无法使用 jVectorMap 将区域标签呈现为 HTML