谷歌地图在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); 
} 

享受它;）