Question

任何人都可以指出我正确的方向如何以MVC方式在sencha touch 2.2.1中实现谷歌地图？一个好的一步一步教程可能吗？

我需要有一个视图和一个控制器，但我不确定在定义地图选项和初始化地图方面这样做的正确方法是什么。一直在浏览互联网上的各种教程，但它们都没有完全符合我想要实现的内容。

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

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

享受它;）

谷歌地图实现在sencha touch 2（MVC方式）

1 个答案: