用于脉冲点的raphael.js css不能像我预期的那样工作

Question

我根据教程创建了以下代码：http://webdesignerwall.com/tutorials/interactive-world-javascript-map。 这是html文件https://gist.github.com/anonymous/84795387d09fe08ee8b6源代码的链接 我已经改变了它，以便在地图上显示一个点。但我想要做的是让点显示“脉冲”效果。最初的点显示在正确的位置，但是当我在课堂上添加以下内容以激活脉冲效果时，圆圈的位置发生了变化......我试图改变比例但是仍然不起作用..当我移除时然后它停止了“脉动”。你有什么想法吗？

$( document ).ready(function() {
//Load the map after the page loads
if (window.addEventListener){ // W3C standard
  window.addEventListener('load', function(){worldmap()}, false); //true means that this request will be ignored if auto is set to off
} 
else if (window.attachEvent){ // Microsoft
    window.attachEvent('onload', function(){worldmap()});
}

function worldmap(){
    image_array=[];
    var div = document.getElementById('map');
    var width=div.offsetWidth;
    var scale=width/887;
    var height=width*.62; 
    var paper = Raphael(div, width, height); //create the Raphael canvas in the map div
    var background=paper.rect(0, 0, width, height); //create the background
    background.attr({fill: ' rgba(32, 32, 32, 1)', 'stroke-width': 0}); 

    //create the map
    var map_path="m 267.53333,537.24584 c -0.6,-0.6 -1,...couldn't put the whole path due to charecter limitation";

    var map=paper.path(map_path).attr({fill: '#483D8B', stroke: 'white'}).scale(scale, scale, 0, 0);

    //create set of locations
    var location_set=paper.set();

    //create locations
    for (var location in locations){
        var loc=locations[location];
        var xy=get_xy(loc.lat, loc.lng);
        var loc_obj=paper.circle(xy.x, xy.y, 7).attr({fill: loc.color, stroke: 'white', 'stroke-width': 2, }).scale(scale, scale, 0, 0);
        loc_obj.node.setAttribute("id","i"+location)
        loc_obj.node.setAttribute("class","loader")
        loc_obj.hide();
        loc_obj.name=loc.name;
        loc_obj.x=xy.x;
        loc_obj.y=xy.y;

        location_set.push(loc_obj);         
    }

    var name = document.getElementById('location_name');
    // *********************************************Functions *********************************************

    function get_xy(lat, lng){  //http://stackoverflow.com/questions/14329691/covert-latitude-longitude-point-to-a-pixels-x-y-on-mercator-projection
        var mapWidth=2058;
        var mapHeight=1746;
        var factor=.404;
        var x_adj=-391;
        var y_adj=37;
        // get x value
        var x = (mapWidth*(180+lng)/360)%mapWidth+(mapWidth/2);

        //convert from degrees to radians
        var latRad = lat*Math.PI/180;

        // get y value
        var mercN = Math.log(Math.tan((Math.PI/4)+(latRad/2)));
        var y = (mapHeight/2)-(mapWidth*mercN/(2*Math.PI));
        return { x: x*factor+x_adj, y: y*factor+y_adj}
    }


        function GetLocationsLength(location){

function ObjectLength( location ) {
    var length = 0;
    for( var key in location ) {
        if( location.hasOwnProperty(key) ) {
            ++length;
        }
    }
    return length;
};

l=ObjectLength( location ); 

RandomGenerator(l,locations,location_set);

    }   //end of selfinvoked Random_Generator


    GetLocationsLength(locations)


function RandomGenerator(length,locations,location_set){
        location_set[0].show();         //console.log(innerHtml);
            var counter=0;
            var x=0;
            previousX=-1;
        var refreshId = setInterval( function() {
                x = Math.floor((Math.random() * location_set.length) ); //generates a random number between 0-4



                    if(counter==0)
                    {location_set[0].show();
                        previousX=0;
                    }
                    counter++;
                    location_set[previousX].hide();
                    location_set[x].show();

                            //add elements to the box
                        //  var flag = locations[x].name.toString();
                    //$("img#location").attr("src", flag);
                    $("img#location").css({"width": "40px", "height": "20px"});
                     $("span#name").text( locations[x].name).show('slow');
                    var link =  locations[x].name.toString();
                    $("a#instituteLink").attr("href", link);
                    $("span#instituteLink").text( locations[x].name).show('slow');

            previousX=x;

            }, 6000);   //end of refreshid funvtion





}//end of function RandomGenerator




}// end of world map function


// *********************************************Location Data*********************************************
var locations={
    0: { 
        name: 'Paris',
        lat: 48.866666670,
        lng: 2.333333333,
        color: 'violet',
                },
    1: { 
        name: 'Shanghai',
        lat: 31.10,
        lng: 121.366,
        color: 'black',

    },
    2: { 
        name: 'New York',
        lat: 40.7,
        lng: -73.90,
        color: 'red',
                },
    3: { 
        name: 'Los Angeles',
        lat: 34.0,
        lng: -118.25,
        color: 'purple',
                },
    4: { 
        name: 'Cape Town',
        lat: -35.916,
        lng: 18.36,
        color: 'hotpink',
                },
    5: { 
        name: 'Santiago',
        lat: -33.45,
        lng: -70.66,
        color: 'blue',
                },
    6: { 
        name: 'Cairo',
        lat: 30.05,
        lng: 31.25,
        color: 'green',
                },
    7: { 
        name: 'yolo',
        lat: 40.05,
        lng: 11.25,
        color: 'green',
                },

    8: { 
        name: 'Singapore',
        lat: 1.30,
        lng: 103.83,
        color: 'orange',
        }
}


});