1

私はジョンエマーソンの世界地図を使用して、いくつかの休暇の目的地を緯度/経度でプロットしています。すべてをハードコーディングすると、カーソルを合わせてドットをクリックすると、休暇のタイトルが表示されます。ただし、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;
  });

先ほど言ったように、ポイントはプロットされていますが、ドットにカーソルを合わせると不透明度の遷移が見えず、ドットをクリックしても何も見えません。

4

1 に答える 1

3

与えられた情報に基づいてこれを確認するのはかなり難しいので、ここに問題があるあなたの例のjsfiddleがあります：

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

そして、これが修正です：

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

確認するのは非常に困難ですが、問題は単にjquery呼び出しが非同期であるため、以下のコードがクリックアクションを設定するまでにデータを返さないことです。したがって、休暇中に都市を反復処理すると、休暇は実際には空になります。

修正は、getJSONコールバック内のすべてのコードを移動して、データが返されるまで実行されないようにすることでした。

于 2012-06-28T23:02:08.020 に答える