Comment gérer un drag-event dans le plugin Google Earth?

Question

Mon javascript est très faible. Est-il possible de modifier le même code ci-dessous pour effectuer les opérations suivantes:

• Faire les objets chargés draggable

• Lorsque l'objet est déposé, une demande ajax à quelque chose comme:

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

Un conseil à offrir?

Exemple de code:

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

Pour les points bonus, puis-je obtenir le fichier KML à recharger par la suite?

Answer 1

Pour rendre les objets pouvant être déplacés, vous devez configurer certains écouteurs d'événement et gérer le mouvement dans la fonction de rappel. Je suppose que les objets que vous souhaitez faire glisser les placerons marques (KmlPlacemark) si vous avez donc besoin quelque chose comme ça ... (NB:. Ce n'a pas été testé et écrit ici, donc il pourrait y avoir des fautes de frappe)

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