VEMap: el trabajo de zoom sartén y por separado; juntos, hacer zoom ya no funciona

StackOverflow https://stackoverflow.com/questions/3785086

Pregunta

Yo estaba tratando de hacer VEMap de Bing Maps es compatible con los dispositivos táctiles, en particular el móvil iPhone / webkit.

En el siguiente ejemplo, esto funciona: - pan utilizando un dedo - zoom in / out usando pellizco (dos dedos)

Sin embargo si pongo tanto en el mismo tiempo, a continuación, el zoom ya no funciona: se puede ver en la consola que VEMap.ZoomIn () o VEMap.ZoomOut () son llamados, pero no pasa nada (ningún error, excepción o nada, simplemente no hace nada).

Hay más probable que exista una solución dada http://www.bing.com/maps maneja tanto tocar y fino gesto, pero que el código está comprimido, por lo que estoy confundido hasta ahora, por lo que cualquier idea sería de gran ayuda. 

<!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>
¿Fue útil?

Solución

Estoy teniendo exactamente el mismo problema, y ??parece que hay una clara falta de documentación sobre ese punto en particular!

He encontrado algo de información sobre la ventana gráfica en la siguiente dirección en el foro de MSDN, pero para mí, incluso la eliminación de los atributos de visualización meta y fijar el tamaño del mapa contenedor no da ningún resultado positivo.

http: // social.msdn.microsoft.com/Forums/en-US/vemapcontroldev/thread/342e5807-7bb5-4c54-94d4-095e800fb736

Espero que encontraré algo pronto.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top