1

Bing Maps の VEMap をタッチ デバイス、特に iphone/webkit モバイルと互換性を持たせようとしていました。

次の例では、これが機能します。 - 1 本の指でパン - ピンチ (2 本の指) でズームイン/アウト

ただし、両方を同時に配置すると、ズームが機能しなくなります。コンソールで VEMap.ZoomIn() または VEMap.ZoomOut() が呼び出されていることがわかりますが、何も起こりません (エラー、例外などはありません)。 、それは何もしません）。

http://www.bing.com/mapsがタッチとジェスチャの両方を正常に処理する場合、解決策が存在する可能性が最も高いですが、そのコードは圧縮されているため、これまでのところ困惑しているため、どんなアイデアでも大きな助けになります。

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

1 に答える 1

1

私はまったく同じ問題を抱えており、その特定の点に関するドキュメントが明らかに不足しているようです!

msdn フォーラムの次のアドレスでビューポートに関する情報を見つけましたが、私にとっては、ビューポートのメタ属性を削除してマップ コンテナーのサイズを修正しても、良い結果は得られません。

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

すぐに何かが見つかることを願っています。

于 2010-09-27T14:51:11.503 に答える