All geek questions in one place

OpenLayers click event on iPhone using PhoneGap

I have a problem with the click event on an OpenLayers Map on iPhone 4 using PhoneGap. It seems that the position obtained by my setMarker (evt) function depends on the scroll position. After a more careful study of the values ​​for x and y, it turned out that y can even be negative. The same code runs on Android, with setMarker getting plausible values ​​for x and y.

Here is a brief example where this problem occurs:

<!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>

A similar problem is here, but since I already use OpenLayers 2.11, its solution does not help me: Problems with scaling and mouse events in Openlayers

+4
source share
1 answer

I finally got this code to work using event.lastTouches [0] for x / y coordinates on the 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));
0
source

Source: https://habr.com/ru/post/1398985/

More articles:


All Articles