3

Google Earth プラグインを使用して、カメラの移動中にユーザーが地面の目印を選択できるようにしたいのですが、これがどのように可能かはわかりません。flyToSpeed が SPEED_TELEPORT に設定されていても、setAbstractView() を呼び出すと、Google Earth プラグインは、GEGlobe に対するものを除いて、マウス ダウン イベントを無視するようです。

私の問題を説明するために（ http://code.google.com/apis/ajax/playground/#draggable_placemarkから）わずかに変更されたコードを次に示します。

var ge;

var placemark;
var dragInfo = null;
var la;
var lat = 37;
var lon = -122;

google.load("earth", "1");

function init() {
  google.earth.createInstance('map3d', initCallback, failureCallback);
}

function tick() {
  la.set(lat, lon,
    0, // altitude
    ge.ALTITUDE_RELATIVE_TO_GROUND,
    0, // heading
    0, // straight-down tilt
    5000 // range (inverse of zoom)
    );
  ge.getView().setAbstractView(la);
  lon = lon + 0.00000001;
}

function initCallback(instance) {
  ge = instance;
  ge.getWindow().setVisibility(true);

  // add a navigation control
  ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);

  // add some layers
  ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true);
  ge.getLayerRoot().enableLayerById(ge.LAYER_ROADS, true);

  // create the placemark
  placemark = ge.createPlacemark('');

  var point = ge.createPoint('');
  point.setLatitude(lat);
  point.setLongitude(lon);
  placemark.setGeometry(point);

  // add the placemark to the earth DOM
  ge.getFeatures().appendChild(placemark);

  // look at the placemark we created
  la = ge.createLookAt('');
  placemark.setName('Drag Me!');
  ge.getOptions().setFlyToSpeed(ge.SPEED_TELEPORT);
  tick();

  // Comment this next line out and the drag works as expected.
  google.earth.addEventListener(ge, "frameend", tick);

  // listen for mousedown on the window (look specifically for point placemarks)
  google.earth.addEventListener(ge.getWindow(), 'mousedown', function(event) {
    console.log("target type = " + event.getTarget().getType());
    if (event.getTarget().getType() == 'KmlPlacemark' &&
        event.getTarget().getGeometry().getType() == 'KmlPoint') {
      //event.preventDefault();
      var placemark = event.getTarget();

      dragInfo = {
        placemark: event.getTarget(),
        dragged: false
      };
    }
  });

  // listen for mousemove on the globe
  google.earth.addEventListener(ge.getGlobe(), 'mousemove', function(event) {
    if (dragInfo) {
      event.preventDefault();
      var point = dragInfo.placemark.getGeometry();
      point.setLatitude(event.getLatitude());
      point.setLongitude(event.getLongitude());
      dragInfo.dragged = true;
    }
  });

  // listen for mouseup on the window
  google.earth.addEventListener(ge.getWindow(), 'mouseup', function(event) {
    if (dragInfo) {
      if (dragInfo.dragged) {
        // if the placemark was dragged, prevent balloons from popping up
        event.preventDefault();
      }

      dragInfo = null;
    }
  });

  document.getElementById('installed-plugin-version').innerHTML =
    ge.getPluginVersion().toString();
}

function failureCallback(errorCode) {
}

各フレームエンドで tick() が呼び出される 56 行目をコメント アウトすると、変更前のコードと同じようにすべてが機能します。プレース マークを正常にドラッグできます。しかし、56行目ではできません。したがって、問題は実際には setAbstractView にあり、マウスダウン イベントが地球やクリックされた目印や機能に伝播されないようにしています。

何か案は？これに対する回避策はありますか?

4

1 に答える 1

0

この問題はメソッドが原因ではなく、を介しsetAbstractViewてメソッドが繰り返し呼び出されたために発生します。tickframend

tick説明するために、メソッドをイベントのイベント ハンドラーとして設定しましたframeend。次に tick メソッドがビューを即座に更新し、frameendイベントをトリガーし、無限に...

このパターンは、ブラウザのメッセージ ループに問題を引き起こし、実際には他のドラッグ イベントをブロックしています。デッドロックを引き起こしている非常にタイトなループのように考えてください。それを機能させるにはsetTimeout、コードを実行するために値 0 を使用できます。この方法では、他のすべての保留中のドラッグ メッセージが処理されるまで、アニメーションは処理されません。

重要な部分は、tick()メソッドの変更です。

function tick() {
  // prevent deadlock
  setTimeout(function () {
    la.set(lat, lon, 0, ge.ALTITUDE_RELATIVE_TO_GROUND, 0, 0, 5000);
    ge.getView().setAbstractView(la);
    lon += 0.00001;
  }, 0);
};

ここでは、完全に機能する例を作成しましたhttp://jsfiddle.net/fraser/JFLaT/

テストしたところ、Windows 8 の Chrome、IE、Firefox、および OSX の Chrome、Safari、Firefox で動作しています。

于 2013-12-15T23:48:45.337 に答える