OpenLayers在Webkit移动浏览器中捕捉纬度不准确

Question

我正在编写一个带有地图的页面，需要捕获在地图上点击/触摸的位置并存储坐标。我正在使用OpenLayers js。在桌面浏览器（IE/FF/Chrome）中，这个功能很好用。在移动设备中，默认安卓浏览器（实际设备和模拟器都是如此）可以正确捕获点击。然而，在移动webkit浏览器（iPhone Safari和Android Chrome Beta）中，我们遇到了一些问题，点击位置会向上（北方）移动几个像素。错误没有被修复（所以，我不能只加100来重新校准顶部）。以下是我作为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);
    }   
});

我应该做些什么不同的事情吗？有人在使用 OpenLayers 时在移动 Webkit 浏览器上看到了精度问题吗？

- Shreeni

Answer 1

我终于找到了这种情况发生的原因。似乎在 Webkit 移动浏览器上，库似乎获取（或推导）的 x、y 坐标是基于页面而不是地图所在元素的。因此计算结果不准确。似乎无法通过添加地图元素的 xy 或某些基于 DOM 的数字来解决不准确性（我尝试过了）。

我通过将地图放置在 IFrame 中，然后将 IFrame 放置在地图元素中来解决这个问题。这样，地图点击处理程序接收到的 x、y 在 IFrame 内是准确的，因此经纬度也是准确的。由于父级和 IFrame 来自同一域，因此在它们之间进行通信没有任何问题。

为了完整起见，经过我的测试，基于 IFrame 的解决方案肯定与 BB 9 及以上版本、Android Chrome、Android 默认浏览器和 iPhone Safari 兼容。

请查看以下解决方案 - http://suat1.vocanic.net//saralee/apps/dengue_alert/，以及iFrame http://suat1.vocanic.net//saralee/apps/dengue_alert/mobileMap.php（WIP版本可能会随时间变化而更改或中断）。

- Shreeni