¿Cómo manejar un evento de arrastre dentro del complemento de Google Earth?

Question

Mi javascript es muy débil. ¿Es posible modificar el mismo código a continuación para hacer lo siguiente:

• Hacer que los objetos cargados sean arrastrables

• Cuando se cae el objeto, una solicitud ajax a algo como:

  http: //.../moveTo? lat = new_lat & amp; long = new_long & amp ; id = some_way_to_uniquely_id_the_object

¿Algún consejo para ofrecer?

Código de muestra:

var ge;

// store the object loaded for the given file... initially none of the objects
// are loaded, so initialize these to null
var currentKmlObjects = {
  'red': null,
  'yellow': null,
  'green': null
};

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

function init() {
  // Create checkboxes
  var content = document.getElementById('content');
  var inputHTML = 'Placemarks:<br/>';
  inputHTML += '<input type="checkbox" id="kml-red-check" onclick="toggleKml(\'red\');"/>' +
               '<label for="kml-red-check">Red</label>' +
               '<input type="checkbox" id="kml-yellow-check" onclick="toggleKml(\'yellow\');"/>' +
               '<label for="kml-yellow-check">Yellow</label>' +
               '<input type="checkbox" id="kml-green-check" onclick="toggleKml(\'green\');"/>' +
               '<label for="kml-green-check">Green</label>';
  content.innerHTML = inputHTML;

  google.earth.createInstance('content', initCB, failureCB);
}

function initCB(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);

  // fly to Santa Cruz
  var la = ge.createLookAt('');
  la.set(37, -122,
          0, // altitude
          ge.ALTITUDE_RELATIVE_TO_GROUND,
          0, // heading
          0, // straight-down tilt
          5000 // range (inverse of zoom)
  );
  ge.getView().setAbstractView(la);

  // if the page loaded with checkboxes checked, load the appropriate
  // KML files
  if (document.getElementById('kml-red-check').checked)
    loadKml('red');

  if (document.getElementById('kml-yellow-check').checked)
    loadKml('yellow');

  if (document.getElementById('kml-green-check').checked)
    loadKml('green');

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

function failureCB(errorCode) {
}

function toggleKml(file) {
  // remove the old KML object if it exists
  if (currentKmlObjects[file]) {
    ge.getFeatures().removeChild(currentKmlObjects[file]);
    currentKmlObject = null;
  }

  // if the checkbox is checked, fetch the KML and show it on Earth
  var kmlCheckbox = document.getElementById('kml-' + file + '-check');
  if (kmlCheckbox.checked)
    loadKml(file);
}

function loadKml(file) {
  var kmlUrl = 'http://earth-api-samples.googlecode.com/svn/trunk/' +
               'examples/static/' + file + '.kml';

  // fetch the KML
  google.earth.fetchKml(ge, kmlUrl, function(kmlObject) {
    // NOTE: we still have access to the 'file' variable (via JS closures)

    if (kmlObject) {
      // show it on Earth
      currentKmlObjects[file] = kmlObject;
      ge.getFeatures().appendChild(kmlObject);
    } else {
      // bad KML
      currentKmlObjects[file] = null;
      alert('Bad KML');

      // uncheck the box
      document.getElementById('kml-' + file + '-check').checked = '';
    }
  });
}

google.setOnLoadCallback(init);

Para obtener puntos de bonificación, ¿puedo volver a cargar el kml después?

Answer 1

Para hacer que los objetos se puedan arrastrar, necesita configurar algunos oyentes de eventos y manejar el movimiento en la función de devolución de llamada. Supongo que los objetos que desea arrastrar son marcas de posición (KmlPlacemark) si es así, necesita algo como esto ... (Nota: Esto no se ha probado y escrito aquí, por lo que podría haber algunos errores tipográficos).

var dragging = false; // the object being dragged

var url = "http://.../moveTo?"; // path to your cgi script

function init() {

// Rest of your method body...

google.earth.addEventListener(ge.getGlobe(), "mousedown", function(e) 
  { 
    // if it is a place mark
    if(e.getTarget().getType() == 'KmlPlacemark') 
    { 
      // set it as the dragging target
      dragging = e.getTarget(); 
     } 
  }); 


google.earth.addEventListener(ge.getGlobe(), "mouseup", function(e)
  {
     // drop on mouse up (if we have a target)
     if(dragging) {
       // build the query string
       // ...you could use getName or getSnippet rather than getId
       var query = "lat=" + dragging.getGeometry().getLatitude() +
       "&long=" + dragging.getGeometry().getLongitude() + 
       "&id=" + dragging.getId(); 
       // send the query to the url
       httpPost(url, query); 
       // clear the dragging target
       dragging = false; 
     }
  }); 


google.earth.addEventListener(ge.getGlobe(), "mousemove", function(e) 
  { 
    // when the mouse moves (if we have a dragging target)
    if(dragging) { 
      // stop any balloon opening
      e.preventDefault(); 
      // drag the object
      // i.e. set the placemark location to cursor the location
      dragging.getGeometry().setLatLng(e.getLatitude(), e.getLongitude());
    } 
  }); 

}

// send a HTTP POST request
// could use jQuery, etc....
function httpPost(url, query) {
    var httpReq = false;
    var self = this;
    // Mozilla/Safari
    if (window.XMLHttpRequest) {
        self.httpReq = new XMLHttpRequest();
    }
    // IE
    else if (window.ActiveXObject) {
        self.httpReq = new ActiveXObject("Microsoft.XMLHTTP");
    }
    self.httpReq .open('POST', url, true);
    self.httpReq .setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    self.httpReq .onreadystatechange = function() {
        if (self.httpReq .readyState == 4) {
            // do something...
            alert(self.httpReq.responseText); 
        }
    }
    self.httpReq.send(query);
}