在Webkit Mobile浏览器中捕获的OpenLayers纬度不准确

Question

我正在编写一个带有Map的页面,我需要捕获地图上Tap/Click的位置并存储坐标.我正在使用OpenLayers js.在桌面浏览器(IE/FF/Chrome)上,这很好用.在移动设备上,可以在默认的Android浏览器上(在实际设备和模拟器中)正确捕获分路器.

然而,在移动webkit浏览器(iPhone Safari和Android Chrome Beta)上,我们遇到的问题是,在实际点击的较高(朝北)几个像素处捕捉到水龙头.错误未修复(因此,我不能只为事件的xy添加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浏览器上看到不准确的问题？

Answer 1

我终于找到了发生这种情况的原因。似乎在 webkit 移动浏览器上，库似乎获取（或导出）的 x,y 是基于页面而不是基于地图所在的元素。因此计算是关闭的。看来，通过添加地图元素的 xy 或一些基于 DOM 的图形也无法解决不准确问题（我尝试过。）

我通过将 Map 放置在 IFrame 中，然后将 iFrame 放置在 map 元素中来解决这个问题。这样，地图点击处理程序接收到的 x、y 在 iF​​rame 内是准确的，因此纬度、经度也是准确的。由于父级和 iFrame 来自同一域，因此来回通信不会出现问题。

为了完成上下文，经我测试，基于 iFrame 的解决方案绝对兼容 BB 9 及以上版本、Android Chrome、Android Default 和 iPhone Safari。

查看解决方案 - http://suat1.vocanic.net//saralee/apps/dengue_alert/ 和 iFrame http://suat1.vocanic.net//saralee/apps/dengue_alert/mobileMap.php（WIP版本可能会随着时间的推移而改变或破坏）