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回调中，以便在数据返回之后它才会运行。

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

1 个答案: