谷歌地圖在sencha touch 2（MVC方式）中執行

Question

任何人都可以請我指出正確的方向如何在sencha touch 2.2.1以MVC方式實現谷歌地圖？一個好的一步一步的教程也許？

我需要一個視圖和一個控制器，但我不確定在定義地圖選項和初始化地圖方面做什麼是正確的。一直在看互聯網上的各種教程，但沒有一個匹配我想要實現的。

我使用一個標籤面板，需要點擊選項卡（稱爲位置）中的一個時，顯示我的地圖...

Answer 1

首先，你必須把地圖面板的標籤容器的項目：

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

下一個，你可以參考它在特定的控制器這一觀點在這樣：

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

這樣，你就可以在控制器b一個地圖對象的引用Ÿ打字：

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); 
} 

享受它;）