在 Raphael.js map 上动态绘制点的 JavaScript

Question

我正在使用 John Emerson 的 world map按纬度/经度绘制一些度假目的地。如果我对所有内容进行硬编码，我可以将鼠标悬停在上面并单击该点，这将显示假期标题。然而，由于试图通过检索 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;
  });

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

Answer 1

根据给定的信息很难看出这一点，所以这里有一个 jsfiddle，你的例子有问题:

http://jsfiddle.net/mmrobins/wQYEf/19/

这是解决方法:

http://jsfiddle.net/mmrobins/wQYEf/18

这真的很难看，但问题很简单，jquery 调用是异步的，所以在下面的代码设置点击操作时它还没有返回数据。因此，当您在假期中遍历城市时，假期实际上是空的。

修复只是将所有代码移动到 getJSON 回调中，以便它在数据返回后才运行。