Raphael.js map如何通过obj.click将点或路径图像添加到路径

时间:2016-01-01 23:31:05

标签: javascript jquery

美好的一天,

我使用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();
          }
            }); 
    }       
});

0 个答案:

没有答案