VEMap: pan and zoom work separately; together, zoom no longuer works

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

문제

I was trying to make Bing Maps's VEMap compatible with touch devices, in particular the iphone / webkit mobile.

In the following example, this works: - pan using one finger - zoom in/out using pinch (two fingers)

However if I put both in the same time, then the zoom doesn't work anymore: you can see in the console that VEMap.ZoomIn() or VEMap.ZoomOut() are called, but nothing happens (no error, exception or anything, it just doesn't do anything).

There most likely exists a solution given http://www.bing.com/maps handles both touch and gesture fine, but that code is compressed, so I'm stumped so far, so any idea would be a huge help.

<!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>
도움이 되었습니까?

해결책

I am having exactly the same problem, and it seems there is a clear lack of documentation on that particular point!

I found some information about the viewport at the following address on the msdn forum, but for me, even removing the viewport meta attributes and fixing the size of the map container doesn't give any positive results.

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

I hope I'll find something soon.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top