OpenLayerマップをiphoneでどのようにズームするには？

私はiPhoneでOpenLayerマップアプリケーションを作成しました。だから私はiphoneの機能によってイベントにアクセスしたいと思っています。タッチイベントでOpenLayerマップをドラッグしたいのです。& iphoneズームジェスチャーイベントによるズーム。 OpenLayerマップを呼び出すために私はWebビューで1つのhtmlファイルを実装しました。正しく動作していますOpenLayerマップを取得します&マップのタッチイベントも今でも他のマップや画像がiphone.pleaseで拡大表示されるようにズームしたいマップ&タッチイベントを呼び出すためのiphoneでOpenLayerマップのズーム機能..OpenLayerマップをiphoneでどのようにズームするには？

を実現するために、私はこのコードが正常に機能しているの.htmlファイル

<!DOCTYPE html> 
    <html> 
     <head> 
     <title>OpenLayers Tutorial - Basic Map Setup</title> 
     <script src="http://openlayers.org/api/OpenLayers.js"></script> 
     <script type="text/javascript"> 
     var map, baseLayer; 
      function init(){ 
       map = new OpenLayers.Map('map');    
       baseLayer = new OpenLayers.Layer.WMS("OpenLayers WMS", "http://labs.metacarta.com/wms/vmap0", {layers:"basic"}); 
       map.addLayer(baseLayer); 
       map.setCenter(new OpenLayers.LonLat(0,0),1);    
      } 
     function touchHandler(event) 
     { 
     var touches = event.changedTouches, 
     first = touches[0], 
     type = ""; 
    switch(event.type) 
     { 
     case "touchstart": type = "mousedown"; break; 
     case "touchmove": type="mousemove"; break; 
     case "touchend": type="mouseup"; break; 
     default: return; 
    } 
    var simulatedEvent = document.createEvent("MouseEvent"); 
     simulatedEvent.initMouseEvent(type, true, true, window, 1, 
     first.screenX, first.screenY, 
     first.clientX, first.clientY, false, 
     false, false, false, 0/*left*/, null); 
     first.target.dispatchEvent(simulatedEvent); 
     event.preventDefault(); 
    } 
    document.addEventListener("touchstart", touchHandler, true); 
    document.addEventListener("touchmove", touchHandler, true); 
    document.addEventListener("touchend", touchHandler, true); 
    document.addEventListener("touchcancel", touchHandler, true); 
     </script> 
     <style> 
     @media screen 
     { 
      #map{width: 300px; height:360px; border: 2px solid black;} 
     } 
     </style> 
     </head> 
     <body onload="init()"> 
     <h3>OpenLayers Tutorial - Basic Map Setup</h3> 
     <div id="map"></div> 
     </body> 
    </html>

にこのコードを使用しています。

出典

2011-08-16 Hrushikesh Betai

自分は痛みを伴うだろう。あなたはそれが本当に簡単になりますので、バージョン2.11 RC2またはトランクを使用する場合があります - this exampleに示すようにあなたがする必要があるすべては、TouchNavigationコントロールを追加します

function init() { 
    map = new OpenLayers.Map({ 
     div: "map", 
     theme: null, 
     projection: new OpenLayers.Projection("EPSG:900913"), 
     units: "m", 
     numZoomLevels: 18, 
     maxResolution: 156543.0339, 
     maxExtent: new OpenLayers.Bounds(
      -20037508.34, -20037508.34, 20037508.34, 20037508.34 
     ), 
     controls: [ 
      new OpenLayers.Control.TouchNavigation({ 
       dragPanOptions: { 
        enableKinetic: true 
       } 
      }), 
      new OpenLayers.Control.ZoomPanel() 
     ], 
     layers: [ 
      new OpenLayers.Layer.OSM("OpenStreetMap", null, { 
       transitionEffect: 'resize' 
      }) 
     ] 
    }); 
    map.setCenter(new OpenLayers.LonLat(0, 0), 3); 
}

出典

2011-08-16 18:21:19 igorti

OK mobilenavigation.jsファイルと私もそのコードを実装していますが、私はiPhoneのようなズーム機能が既にAPIのズーム＆イメージ用に持っていると言っているので私のためには機能しません –

正確にはどういう意味ですか？ OpenLayersでは、ネイティブアプリケーションと同じようにズームインします.2本の指で挟みます。それはどう違うの？ – igorti

まさに私は同じことを望んでいます "OpenLayersでは、ネイティブアプリケーションと同じようにズームインします.2本の指でつまむことができます。あなたの与えられたコードが私のために働いていない場合、それについてより具体的にすることができます。 –

OpenLayersを次期の2.11バージョンは、ズーム、パン用のタッチイベントをサポートします... 参照：http://dev.openlayers.org/examples/mobile.html

HTH、これを実装する

出典

2011-08-16 11:32:50 tonio

OK私が言ったように私はすでにその例を見ますがいますiPhoneのようなズーム機能が既に必要です –

OpenLayerマップをiphoneでどのようにズームするには？

答えて

関連する問題