0

MVC 方式で sencha touch 2.2.1 に Google マップを実装する方法について、正しい方向を教えてもらえますか? ステップバイステップの良いチュートリアルでしょうか？

ビューとコントローラーが必要ですが、マップ オプションの定義とマップの初期化に関して正しい方法がわかりません。インターネットでさまざまなチュートリアルを見てきましたが、実装したいものと正確に一致するものはありません。

タブ パネルを使用しており、いずれかのタブ (場所と呼ばれる) をクリックしたときにマップを表示する必要があります...

4

1 に答える 1

1

まず、マップ パネルをタブ コンテナーのアイテムとして配置する必要があります。

{
  xtype: 'map',
  useCurrentLocation: false,
  mapOptions: {
    disableDefaultUI: true,
    zoom: 11,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
}

次に、このビューの特定のコントローラーで次のように参照できます。

config: {
  refs: {
    ...
    mymap: '.map',
    ...
  },
  ...
}

そのようにして、次のように入力して、コントローラーでマップオブジェクトの参照を取得できます。

this.getMymap()

ハンドラーをマップにアタッチして、レンダリング時に何らかのアクションを実行できます。

this.getMymap().on('maprender', this.onMapRender, this, { single: true });

ここで、「onMapRender」はコントローラーのメソッドです。たとえば、地図上にマーカーをレンダリングして中央に配置したい場合は、そのようにする必要があります。これは、地図によって「maprender」イベントがディスパッチされる前は、その上でアクションを実行できないためです (GMap オブジェクトは単にまだ存在しない)、たとえば、コントローラーでは、ハンドラーは次のようになります。

onMapRender: function(e) {
    var latLngCoordinates = new google.maps.LatLng(..., ...)
        marker = new google.maps.Marker({
            position: latLngCoordinates,
            animation: google.maps.Animation.DROP,
            map: this.getMymap().getMap()
        });

    this.getMymap().setMapCenter(latLngCoordinates);
}

それを楽しんでください;）

于 2013-08-17T22:34:27.233 に答える