美好的一天,
我使用Raphael.js构建了一个交互式地图。所以现在我想通过点击路径图添加带有图像注释的文本。
此时请注意下载为png图像,是否可以将其更改为其他路径或点?
path.js
var russia = {
map3: {
troizki: {
name: 'Троицкий АО',
image: 'M141.3,519.',
path: 'M141.3,519.5 c4,0.1,6.7,1,5.2,6.2c-2.1,7.4-...
}
init.js
$(function(){
var map = 'troizki';
var r = Raphael(map, 700, 850),
attributes = {
fill: '#e6e7e8',
stroke: '#B5B5B5',
'stroke-width': 1,
'stroke-linejoin': 'round'
},
arr = new Array();
for (var country in russia[map]) {
var obj4 = r.path(russia[map][country].path);
obj4.attr(attributes);
arr[obj4.id] = country;
obj4.click(function(){
document.location.hash = arr[this.id];
var point = this.getBBox(0);
$('#'+map).next('.point').remove();
$('#'+map).after($('<div />').addClass('point'));
// **IMAGE HERE**
$('.point')
.html('<p>'+russia[map][arr[this.id]].name+'</p>')
.prepend($('<img />').attr('src', 'img/'+arr[this.id]+'.png'))
.css({
left: point.x+(point.width)+215,
top: point.y+(point.height/2)+10
})
.fadeIn();
}
});
}
});