2012-05-07 1 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를 사용하면서 모바일 웹킷 브라우저에서 부정확 한 문제를 본 사람이 있습니까?

답변

1

나는 마침내 이것이 일어나는 이유를 발견했다. 웹킷 모바일 브라우저에서 라이브러리가 가져 오는 것 (또는 파생되는 것)이지도가있는 요소가 아닌 페이지를 기반으로하는 x, y 인 것으로 보입니다. 따라서 계산이 꺼져 있습니다. 지도 요소의 xy 나 DOM 기반의 그림을 추가하여 부정확성을 해결할 수없는 것 같습니다. (시도했습니다.)

지도를 IFrame에 넣고 해결했습니다. iFrame은지도 요소 내에 있습니다. 이 방법으로지도 클릭 핸들러에서받은 x, y는 iFrame 내에서 정확하므로 lat, long도 정확합니다. 상위 도메인과 iFrame은 모두 동일한 도메인의 도메인이므로 의사 소통에 문제가 없습니다.

iFrame 기반 솔루션은 위에서 테스트 한 BB 9 &, Android Chrome, Android Default 및 iPhone Safari와 확실히 호환됩니다.

의 솔루션을 체크 아웃 - http://suat1.vocanic.net//saralee/apps/dengue_alert/http://suat1.vocanic.net//saralee/apps/dengue_alert/mobileMap.php (변경하거나 시간을 깰 책임 WIP 버전)

에서 iframe이
관련 문제