Latitud de OpenLayers capturada de forma incorrecta en los navegadores de Webkit Mobile

Question

Estoy programando una página con un Mapa donde necesito capturar la ubicación de Tap/Click en un mapa y almacenar las coordenadas. Estoy usando OpenLayers js. En los navegadores de escritorio (IE/FF/Chrome), esto está funcionando bien. En dispositivos móviles, el tap está siendo capturado correctamente en el navegador predeterminado de Android (tanto en dispositivos reales como en emuladores).

Sin embargo, en los navegadores de navegadores web móviles (iPhone Safari & Android Chrome Beta), estamos teniendo un problema donde el tap está siendo capturado unos pocos píxeles más (hacia el norte) del tap. El error no es fijo (así, no puedo añadir 100 a xy del evento para recalibrar la parte superior.)

Aquí está el código que estoy utilizando como 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); 
    } 
}); 

¿Debo estar haciendo algo diferente? ¿Alguien más ha visto el problema de inexactitud en los navegadores webkit móviles al usar OpenLayers?

Answer 1

Finalmente encontré la razón por la que esto está sucediendo. Parece que en los navegadores web de webkit, la x, y que la biblioteca parece estar obteniendo (o derivando) se basa en la página y no en el elemento en el que se encuentra el mapa. Por lo tanto, los cálculos están apagados. Parece que la inexactitud no puede resolverse agregando el elemento xy del elemento del mapa o alguna de esas figuras basadas en DOM también (lo probé).

Lo resolví alojando el Mapa en un IFrame y luego teniendo el iFrame alojado dentro del elemento del mapa. De esta forma, la x, y que recibe el manejador de clics del mapa es precisa dentro del iFrame y, por lo tanto, el lat, long también es preciso. Dado que tanto el elemento primario como el iFrame pertenecen al mismo dominio, no hay problemas de comunicación de ida y vuelta.

Para completar el contexto, la solución basada en iFrame es definitivamente compatible con BB 9 & anterior, Android Chrome, Android Default y iPhone Safari, según lo probado por mí.

Mira la solución a - http://suat1.vocanic.net//saralee/apps/dengue_alert/ y el marco flotante en http://suat1.vocanic.net//saralee/apps/dengue_alert/mobileMap.php (versiones WIP susceptibles de cambiar o romper con el tiempo)