sencha touch 2 中的谷歌地图实现（MVC 方式）答案

【问题标题】：google maps implementation in sencha touch 2 (the MVC way)sencha touch 2 中的谷歌地图实现（MVC 方式）
【发布时间】：2013-08-17 15:30:46
【问题描述】：

谁能指出我正确的方向，如何以 MVC 方式在 sencha touch 2.2.1 中实现谷歌地图？也许是一个很好的分步教程？

我需要一个视图和一个控制器，但我不确定在定义地图选项和初始化地图方面的正确方法是什么。一直在查看 Internet 上的各种教程，但没有一个与我想要实现的完全匹配。

我正在使用选项卡面板，单击其中一个选项卡（称为位置）时需要显示我的地图...

【问题讨论】：

标签： google-maps sencha-touch

【解决方案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);
}

尽情享受吧;)

【讨论】：

成功了，谢谢。我做的一个小改动是将我的地图面板作为扩展 Ext.Map 的单独视图。