Javascript Raphael.js映射如何通过obj将点或路径图像添加到路径。单击

你好

我使用Raphael.js构建了一个交互式地图。现在我想通过点击路径图来添加带有图像注释的文本

此时请注意下载为png图像，是否可以将其更改为其他路径或点

路径.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-...
            }

$(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();
          }
            }); 
    }       
});

init.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-...
            }

$(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();
          }
            }); 
    }       
});

$（函数（）{
变量映射='troizki'；
var r=拉斐尔（地图，700850），
属性={
填写：“#e6e7e8”，
笔划：“#b5”，
“笔划宽度”：1，
“笔划线条连接”：“圆形”
},
arr=新数组（）；
用于（俄罗斯的var国家[地图]）{
var obj4=r.path（俄罗斯[地图][国家].path）；
obj4.attr（属性）；
arr[obj4.id]=国家；
obj4.单击（函数（）{
document.location.hash=arr[this.id]；
var point=this.getBBox（0）；
$（'#'+map）.next（'.point'）.remove（）；
$（'#'+map）.after（$（''）.addClass（'point'）；
//**此处为图像**
$（“.point”）
.html（''+russia[map][arr[this.id]]].name+'
'）
.prepend（$（'