2012-05-07 5 views
6

私は地図上のタップ/クリックの位置をキャプチャして座標を保存する必要があるマップを持つページをプログラミングしています。私はOpenLayers jsを使用しています。デスクトップブラウザ(IE/FF/Chrome)ではうまくいきます。モバイルデバイスでは、デフォルトのAndroidブラウザ(実際のデバイスとエミュレータの両方)でタップが正しく取得されています。OpenLayersの緯度がWebkitモバイルブラウザで不正確に取得される

モバイルウェブキットブラウザ(iPhone Safari & Android Chromeベータ版)では、実際のタップよりも数ピクセル高い(北に向かって)タップがキャプチャされる問題が発生しています。エラーはここで(。そう、私はトップを再較正するイベントの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ブラウザで不正確な問題を見たことがありますか?

答えて

1

私はついにこれが起こった理由を発見しました。 Webkitのモバイルブラウザでは、ライブラリが取得(または導出)していると思われるx、yは、マップが格納されている要素ではなくページに基づいているようです。したがって、計算はオフです。マップ要素のxyまたはそのようなDOMベースの図形を追加することで、不正確さを解決できないようです(試しました)。

私はIFrameにマップを格納して解決しました。 iFrameはマップ要素内に格納されています。このようにして、マップクリックハンドラが受け取ったx、yはiFrame内で正確であり、lat、longも正確です。親とiFrameの両方が同じドメインのものであるため、前後に通信する際に問題はありません。

iFrameベースのソリューションは、私がテストしたところ、上記のBB 9 &、Android Chrome、Android Default、およびiPhone Safariと確実に互換性があります。

で溶液をチェックアウト - (変更または時間で破ることWIPバージョンが責任を負う)http://suat1.vocanic.net//saralee/apps/dengue_alert/mobileMap.php

http://suat1.vocanic.net//saralee/apps/dengue_alert/とiframe
関連する問題