sencha touch 2中的google maps实现（MVC方式） [英] google maps implementation in sencha touch 2 (the MVC way)

问题描述

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

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

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

<首先，您必须将地图面板作为您的标签容器的项目：

 
  {
 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）; 
} 
  

享用它;）

can anyone please point me in the right direction about how to implement google maps in sencha touch 2.2.1 in an MVC fashion? a good step by step tutorial maybe?

I need to have a view and a controller but am not sure what is the correct way of doing it as regards defining map options and initializing the map. Been looking at various tutorials on the Internet but none of them matches exactly what I want to implement.

I am using a tab panel and my map needs to be displayed when clicking one of the tabs (called Location)...

解决方案

first, you have to put the map panel as item of your tab container:

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

next, you can refer to it in the specific controller for this view in this way:

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

in that way you can have a reference of your map object in the controller by typing:

this.getMymap()

and can attach an handler to the map to make some action on it when it is rendered:

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

where "onMapRender" is a method of your controller. You have to do in that way if you want, for example, render a marker over the map and center it, because before the "maprender" event dispatched by the map, you can not do any action over it (the GMap object simply does not yet exists), so, for example, in your controller, the handler could be:

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

enjoy with it ;)

这篇关于sencha touch 2中的google maps实现（MVC方式）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！