PhoneGapを使用したOpenLayersのクリックイベント

PhoneGapを使用したiPhone 4のOpenLayersマップのclickイベントに問題があります。私のsetMarker（evt）関数で受け取ったPositionはスクロール位置に依存しているようです。 xとyの値を詳しく見てみると、yは負でもあることが分かりました。同じコードがAndroid上で動作しています。setMarkerは、xとyの両方についてもっともらしい値を受け取ります。ここで PhoneGapを使用したOpenLayersのクリックイベント

は、この問題が発生した簡単な例です：

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" /> 
<meta charset="utf-8"> 
<style> 
    html, body { 
     height:99%; 
     width:99%; 
    } 
</style> 
<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script> 
<script type="text/javascript" charset="utf-8" src="OpenLayers.js"></script>  
<script type="text/javascript"> 
var map, layer, markers; 


function setMarker(e){ 
    markers.clearMarkers(); 
    var markerpos = map.getLonLatFromViewPortPx(e.xy); 

    var size = new window.OpenLayers.Size(21,25); 
    var offset = new window.OpenLayers.Pixel(-(size.w/2), -size.h); 
    var icon = new window.OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png',size,offset); 

    var marker = new window.OpenLayers.Marker(markerpos,icon); 
    markers.addMarker(marker); 
} 

function onDeviceReady() 
{ 
    map = new window.OpenLayers.Map("map", { controls: [new window.OpenLayers.Control.Navigation()]}); 
    layer = new window.OpenLayers.Layer.OSM("Simple OSM Map");  
    map.addLayer(layer); 
    map.setCenter(
        new window.OpenLayers.LonLat(10,50).transform(
        new window.OpenLayers.Projection("EPSG:4326"), // From WGS 84 
        map.getProjectionObject()  // to Spherical Mercator 
        ), 
       18 //Zoom 
       ); 

    var touchNav = new window.OpenLayers.Control.TouchNavigation({ 
         defaultClickOptions:{ 
          pixelTolerance: 10 
          } 
         }); 

    // A click will set the marker: 
    window.OpenLayers.Util.extend(touchNav, { 
            defaultClick: function(evt) { 
            alert("you clicked " + evt.xy); 
            setMarker(evt); 
            } 
            }); 
    map.addControl(touchNav); 
    touchNav.activate(); 

    markers = new window.OpenLayers.Layer.Markers("Markers"); 
    map.addLayer(markers); 
    console.log("map generated"); 

} 

</script> 
</head> 
    <body onload="document.addEventListener('deviceready', onDeviceReady, false);"> 
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
    <div id="map" style="width:100%;height:100%"></div> 
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
    </body> 
</html>

同様の問題がここにあるが、私はすでにOpenLayersを2.11を使用していて、彼のソリューションは、私を助けていません：Problems with zooming and mouse events in Openlayers

出典

2012-02-29 allesmi

私は最終的に得ましたこのコードはiPhoneのx/y座標に event.lastTouches [0]を使用して作業します：

var x = e.xy.x; 
var y = e.xy.y; 
if(window.device.platform === "iPhone"){ 
    x = e.lastTouches[0].clientX; 
    y = e.lastTouches[0].clientY + window.pageYOffset; 

    x -= document.getElementById("map").offsetLeft; 
    y -= document.getElementById("map").offsetTop; 
} 
var markerpos = map.getLonLatFromViewPortPx(new window.OpenLayers.Pixel(x, y));

出典

2012-04-06 11:57:45 allesmi

PhoneGapを使用したOpenLayersのクリックイベント

答えて

関連する問題