JavaScript 在 Raphael.js 地图上动态绘制点

我正在使用约翰·爱默生的世界地图来绘制一些纬度/经度的度假胜地。如果我对所有内容进行硬编码，我可以将鼠标悬停在上面并单击圆点，这将显示假期标题。但是，由于尝试通过检索 JSON 来动态绘制我的目的地，因此我无法再单击。任何JavaScript专家可以帮助我找出我做错了什么吗？

这是我的代码：

window.onload = function () {
  var current = null;
  var map = {};
  var m = {};       
  var attr = {
    fill: "#333",
    stroke: "#888",
    "stroke-width": .5,
    "stroke-linejoin": "round"
  };        
  var map = {};
  var R = Raphael("holder_570");
  render_map(R,map,attr);   
  for (var state in map) {                      
            map[state].color = Raphael.getColor();
            (function (st, state) {
      st[0].style.cursor = "pointer";
      st[0].onmouseover = function () {
        current && map[current].animate({fill: "#333", stroke: "#666"}, 300);
        // st.animate({fill: st.color, stroke: "#ccc"}, 300);
        R.safari();
        // current = state;
      };
      st[0].onmouseout = function () {
        st.animate({fill: "#333", stroke: "#666"}, 300);
        R.safari();
      };
      // st[0].onclick = function () {
      //   alert(state);
      // };
    })(map[state], state);
  }; // end for
  function lon2x(lon) {
      var xfactor = 1.5255;
      var xoffset = 263.58;
      var x = (lon * xfactor) + xoffset;
      return x;
  }
  function lat2y(lat) {
    var yfactor = -1.5255;
    var yoffset = 130.5;
    var y = (lat * yfactor) + yoffset;
    return y;
  }
  var city_attr = {
    fill: "#0f0",
    stroke: "none",
    opacity: .3
  };
  function plot(lat,lon,size) {
    size = size * .5 + 4;
    return R.circle(lon2x(lon), lat2y(lat), size).attr(city_attr);
  }

  var vacations = {};
  $.getJSON("/vacations_lat_long", function(data) {
    var datum, _i, _len, _results;
    _results = [];
    for (_i = 0, _len = data.length; _i < _len; _i++) {
      datum = data[_i];
      _results.push(vacations[datum.city] = plot(parseFloat(datum.latitude), parseFloat(datum.longitude), 1));
    }
    return _results;
  });
  // HARD CODED EXAMPLES
  // vacations.Nellysford        = plot(37.9069562,-78.8527841,1);
  // vacations.Charles_Town      = plot(39.2536975,-77.9335429,1);
  var current_city = null;
  var city_box = null;
  for (var city in vacations) {                      
            map[state].color = Raphael.getColor();
            (function (st, city) {
      st[0].style.cursor = "pointer";
      st[0].onmouseover = function () {
        current_city && vacations[current_city].animate({fill: "#0f0", opacity: .3}, 300);
        st.animate({fill: "#0f0", opacity: 1}, 300);
        R.safari();
        current_city = city;
      };
      st[0].onmouseout = function () {
        st.animate({fill: "#0f0", opacity: .3}, 300);
        R.safari();
      };
      st[0].onclick = function () {
        if (t = document.getElementById(city_box)) { t.style.display = "none"; }
        if (t = document.getElementById(city)) { t.style.display = "block"; }
        city_box = city;
      };

      if (t = document.getElementById(city)) {
          t.style.left = vacations[city].attr('cx') + 'px';
          t.style.top = vacations[city].attr('cy') -20 + 'px';
      }
    })(vacations[city], city);
  }; // end for
};

我遇到问题的地方是这段代码：

$.getJSON("/vacations_lat_long", function(data) {
    var datum, _i, _len, _results;
    _results = [];
    for (_i = 0, _len = data.length; _i < _len; _i++) {
      datum = data[_i];
      _results.push(vacations[datum.city] = plot(parseFloat(datum.latitude), parseFloat(datum.longitude), 1));
    }
    return _results;
  });

正如我所说，点已绘制，但将鼠标悬停在点上时看不到不透明度过渡，单击点时也看不到任何内容。