gpt4 book ai didi

javascript - 使用 PhoneGap 的 iPhone 上的 OpenLayers 单击事件

转载 作者:可可西里 更新时间:2023-11-01 06:16:51 25 4
gpt4 key购买 nike

我在使用 PhoneGap 的 iPhone 4 上的 OpenLayers map 上的点击事件有问题。看来我的 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,他的解决方案对我没有帮助:Problems with zooming and mouse events in Openlayers

最佳答案

我终于让这段代码通过使用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));

关于javascript - 使用 PhoneGap 的 iPhone 上的 OpenLayers 单击事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9497044/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com