Событие клика OpenLayers на iPhone с PhoneGap - PullRequest
Новая
       35

Событие клика OpenLayers на iPhone с PhoneGap

4 голосов
/ 29 февраля 2012

У меня проблема с событием нажатия на карте OpenLayers на iPhone 4 с использованием PhoneGap. Похоже, что позиция, полученная моей функцией setMarker (evt), зависит от позиции прокрутки. После более внимательного изучения значений 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

1 Ответ

0 голосов
/ 06 апреля 2012

Я наконец получил этот код для работы с помощью event.lastTouches [0] для координат x / y на iPhone: 

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