OpenLayers使用PhoneGap點擊iPhone上的活動

Question

我在使用PhoneGap的iPhone 4上的OpenLayers地圖上遇到了點擊事件的問題。 似乎我的setMarker（evt）函數接收的Position取決於滾動位置。 在仔細研究了x和y的值后，我發現y甚至可以是負數。 相同的代碼在Android上運行，setMarker接收x和y的合理值。

以下是出現此問題的簡短示例：

<!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，他的解決方案對我沒有幫助： Openlayers中的縮放和鼠標事件問題

Answer 1

我終於通過使用event.lastTouches [0]獲取iPhone上的x / y坐標來使用此代碼：

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));

OpenLayers使用PhoneGap點擊iPhone上的活動

問題描述

1 個解決方案

解決方案1
0 已采納 2012-04-06 11:57:45

OpenLayers使用PhoneGap點擊iPhone上的活動

問題描述

1 個解決方案

解決方案1 0 已采納 2012-04-06 11:57:45

解決方案1
0 已采納 2012-04-06 11:57:45