5

我正在使用地图编程页面，我需要在地图上捕获点击/单击的位置并存储坐标。我正在使用 OpenLayers js。在桌面浏览器（IE/FF/Chrome）上，这工作正常。在移动设备上，点击在默认的 Android 浏览器上被正确捕获（在真实设备和模拟器中）。

然而，在移动 webkit 浏览器（iPhone Safari 和 Android Chrome Beta）上，我们遇到了一个问题，即在实际点击高几个像素（朝北）处捕获点击。该错误未修复（因此，我不能只在事件的 xy 上添加 100 来重新校准顶部。）

这是我用作点击处理程序的代码：

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 浏览器上的不准确问题？

4

1 回答 1

1

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

我通过将地图容纳在 IFrame 中，然后将 iFrame 容纳在地图元素中来解决它。这样，地图点击处理程序接收到的 x,y 在 iF​​rame 内是准确的，因此 lat、long 也是准确的。由于父级和 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版本可能随时间改变或中断）

于 2012-05-14T11:01:38.240 回答