Question

My javascript is very weak. Is it possible to modify the same code below to do the following:

Make the objects loaded draggable
当物体被扔掉时，发送一个类似于Ajax请求的东西：

http://.../moveTo?lat=new_lat&long=new_long&id=some_way_to_uniquely_id_the_object 的中文翻译为：将此链接转移到?lat = new_lat&long = new_long&id = 某种独特地标识对象的方式。

有什么建议？

示例代码：

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);

为了得到加分，之后我可以重新加载kml吗？

Answer 1

要使物体可拖动，您需要设置一些事件监听器并在回调函数中处理移动。我假设您想拖动的对象是地标（KmlPlacemark），如果是这样，您需要像这样的东西...（注：本文未经测试，写在这里可能会有一些拼写错误。）

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);
}

友情链接