Latitudine OpenLayers acquisita in modo inaccurato nei browser Webkit Mobile

Question

Sto programmando una pagina con una mappa in cui è necessario acquisire la posizione del Tap/Click su una mappa e memorizzare le coordinate. Sto usando OpenLayers js. Sui browser desktop (IE/FF/Chrome), funziona perfettamente. Sui dispositivi mobili, il tap viene catturato correttamente sul browser Android predefinito (sia nei dispositivi reali che negli emulatori).

Tuttavia sui browser webkit per dispositivi mobili (iPhone Safari & Android Chrome Beta), stiamo riscontrando un problema in cui il tap viene catturato per alcuni pixel più in alto (verso nord) dell'attuale tap. L'errore non è fisso (quindi, non posso aggiungere appena 100 xy della manifestazione per ricalibrare l'alto.)

Ecco il codice che sto usando come clickHandler:

OpenLayers.Control.ClickHandler = OpenLayers.Class(OpenLayers.Control, {     
    defaultHandlerOptions: { 
     'single': true, 
     'double': false, 
     'pixelTolerance': 0, 
     'stopSingle': false, 
     'stopDouble': false 
    }, 

    initialize: function(options) { 
     this.handlerOptions = OpenLayers.Util.extend(
      {}, this.defaultHandlerOptions 
     ); 
     OpenLayers.Control.prototype.initialize.apply(
      this, arguments 
     ); 
     this.handler = new OpenLayers.Handler.Click(
      this, { 
       'click': this.trigger 
      }, this.handlerOptions 
     ); 
    }, 

    trigger: function(e) { 
     that.inputLonLat_EPSG4326 = null; 

     var lonlat = that.inputMap.getLonLatFromViewPortPx(e.xy); 

     that.logMessage("XY " + e.xy); 
     that.logMessage("LonLoat " + lonlat); 

     that.inputMarkers.clearMarkers(); 


    that.inputMarkers.addMarker(new OpenLayers.Marker(lonlat,that.icons["green"].clone())); 

    lonlat.transform(that.inputMap.getProjectionObject(), new OpenLayers.Projection("EPSG:4326")); 

    that.inputLonLat_EPSG4326 = lonlat; 
    // For the moderation sections 
    $('#alertLatitude').val(that.inputLonLat_EPSG4326.lat); 
    $('#alertLongitude').val(that.inputLonLat_EPSG4326.lon); 

    //lonLat2.transform(that.inputMap.getProjectionObject(), new OpenLayers.Projection("EPSG:4326")); 
    that.logMessage("Stored lat " + that.inputLonLat_EPSG4326.lat); 
    that.logMessage("Stored lon " + that.inputLonLat_EPSG4326.lon);  

    that.callFunction(that.inputMapListener, e); 
    } 
}); 

dovrei essere fare qualcosa di diverso? Qualcun altro ha visto il problema di inaccuratezza nei browser webkit mobili durante l'utilizzo di OpenLayers?

Answer 1

Ho finalmente trovato la ragione per cui questo sta accadendo. Sembra che sui browser mobile di Webkit, la x, y che la libreria sembra ottenere (o derivare) sia basata sulla pagina e non sull'elemento in cui è ospitata la mappa. Quindi i calcoli sono fuori. Sembra che l'inaccuratezza non possa essere risolta aggiungendo il xy dell'elemento mappa o una tale figura basata su DOM troppo (l'ho provato)

L'ho risolto inserendo la Mappa in un IFrame e poi ho il iFrame ospitato all'interno dell'elemento mappa. In questo modo la x, y ricevuta dal gestore di click della mappa è precisa all'interno dell'iframe e quindi anche lat, long è accurato. Poiché sia ​​il genitore che iFrame appartengono allo stesso dominio, non ci sono problemi a comunicare avanti e indietro.

Per completare il contesto, la soluzione basata su iFrame è decisamente compatibile con BB 9 & sopra, Android Chrome, Android Default e iPhone Safari, come testato da me.

estrarre la soluzione a - http://suat1.vocanic.net//saralee/apps/dengue_alert/ e l'iFrame a http://suat1.vocanic.net//saralee/apps/dengue_alert/mobileMap.php (versioni WIP che possono cambiare o rompere con il tempo)