VEMAP: travail panoramique et zoom séparément; ensemble, zoom ne fonctionne plus
https://stackoverflow.com/questions/3785086
-
05-10-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Je suis en train de faire VEMAP de Bing Maps compatible avec les appareils tactiles, notamment le mobile iphone / webkit.
Dans l'exemple suivant, cela fonctionne: - panoramique à l'aide d'un doigt - zoom avant / arrière à l'aide de pincement (deux doigts)
Toutefois, si je mets à la fois dans le même temps, le zoom ne fonctionne plus: vous pouvez voir dans la console que VEMap.ZoomIn () ou VEMap.ZoomOut () sont appelés, mais rien ne se passe (pas d'erreur, exception ou quoi que ce soit, ça ne fait rien).
Il existe plus probablement une solution donnée poignées http://www.bing.com/maps à la fois toucher et beau geste, mais ce code est compressé, donc je suis perplexe à ce jour, de sorte que toute idée serait d'une grande aide.
<!DOCTYPE html>
<html>
<head>
<title>VEMap</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3&mkt=en-us"></script>
</head>
<body onload="init()">
<div id="mymap" style="position: relative; width: 256px; height: 256px;"></div>
<script type="text/javascript">
// Reference to the VEMap
var map = null;
// Whether a gesture is being performed currently or not.
var gesture = false;
// Translates touch event names into similar mouse event names
var touch2mouse = {"touchstart": "mousedown", "touchmove": "mousemove", "touchend": "mouseup"};
// Initializes the map and adds the touch/gesture listeners
function init(){
map = new VEMap('mymap');
map.HideDashboard();
map.LoadMap(new VELatLong(51.64, -0.18), 9, VEMapStyle.Road);
if (typeof Touch == "object"){
// Zooms the map using touch-pinch
document.addEventListener("gesturestart", ongesture, true);
document.addEventListener("gesturechange", ongesture, true);
document.addEventListener("gestureend", ongesture, true);
// Pans the map using touch-drag
// If you comment out these three lines, pinch-zoom works :(
document.addEventListener("touchstart", ontouch, true);
document.addEventListener("touchmove", ontouch, true);
document.addEventListener("touchend", ontouch, true);
}
}
// One finger interaction
function ontouch(e){
var touches = e.changedTouches;
if ((!gesture) && (touches.length == 1)){
if (e.type == "touchmove") e.preventDefault();
var obj = touches[0];
var e2 = document.createEvent("MouseEvent");
e2.initMouseEvent(touch2mouse[e.type], true, true, window, 1, obj.screenX, obj.screenY, obj.clientX, obj.clientY, false, false, false, false, 0, null);
obj.target.dispatchEvent(e2);
}
}
// Two fingers interaction
function ongesture(e){
e.preventDefault();
switch(e.type){
case "gesturestart":
gesture = true;
break;
case "gestureend":
gesture = false;
if (e.scale > 1.2){
console.log('Attempting to zoom IN.');
map.ZoomIn();
} else if (e.scale < 0.8){
map.ZoomOut();
console.log('Attempting to zoom OUT.');
}
break;
}
}
</script>
</body>
</html>
La solution
J'ai exactement le même problème, et il semble qu'il y ait un manque évident de documentation sur ce point particulier!
J'ai trouvé quelques informations sur la fenêtre à l'adresse suivante sur le forum msdn, mais pour moi, en supprimant même les attributs meta viewport et fixer la taille du conteneur de carte ne donne pas de résultats positifs.
J'espère que je vais trouver quelque chose bientôt.
