我在哪裏可以將Google Maps邏輯放入Sencha-Touch 2？多個標記

Question

我在Google Appengine上運行了一個運行正常的Google地圖。

我想通過使用（或許）Sencha Touch 2將其變成移動友好界面。也許我應該知道Sencha EXT JS4，但我不能在文檔中的任何地方看到它。

我不太瞭解JavaScript。這是我的'通過實踐學習'的應用程序。

我一直在閱讀Sencha Touch 2的文檔中的例子，但它獲得一些基本的HTML和圖像TabPanels後停止短。

在github上還有一些其他的示例，用於Sencha Touch 2 MVC &表單，我想要處理它，但第一步是重新創建我的功能圖。

我已經包含了當前工作谷歌地圖循環：

for(var i = 0; i < pubs.length; ++i) { 
    (function (address, name, phone, price, icon, lat, lng, boing) { 
     var posi = new google.maps.LatLng(lat, lng); 
     if(boing == 'true') { 
      var bounce = google.maps.Animation.BOUNCE; 
     }; 
     var marker = new google.maps.Marker({ 
      animation: bounce, 
      map: beerMap.map, 
      //changed this to beerMap 
      icon: icon, 
      shadow: shadow, 
      position: posi, 
      title: name 
     }); 
     google.maps.event.addListener(marker, 'click', function() { 
      content_string = '<div id=content>' + '<div id="infoWindow">' + '</div>' + '<h2 id="pubName" class="pubName">' + name + '</h2>' + '<div id="pubAddress">' + '<p><b>' + address + '</b>' + '<div id="pubPhone" class="pubPhone">' + '<p>Phone: ' + phone + '<p>Halvliterpris: NOK <b>' + price + '</b>'; 
      bubble.setContent(content_string); 
      bubble.open(beerMap.map, marker); 
     }); 
    })(pubs[i], pub_name[i], pub_phone[i], beer_price[i], marker_icon[i], pub_lat[i], pub_lng[i], pub_bounce[i]); 
} 

./app/app.js

Ext.Loader.setConfig({ 
    enabled: true 
}); 
Ext.application({ 
    name: 'app', 
    appFolder: 'static/app', 
    controllers: ['Home'], 
    launch: function() { 
     console.log('Ext.application ~ launch'); 
     Ext.create('Ext.tab.Panel', { 
      fullscreen: true, 
      tabBarPosition: 'bottom', 
      items: [{ 
       title: 'Home', 
       iconCls: 'home' 
      }, { 
       title: 'Beer', 
       iconCls: 'locate', 
       xtype: 'map' 
      }, { 
       title: 'Gigs', 
       iconCls: 'star' 
      }] 
     }); 
    } 
}); 

./app/controller/Home.js

Ext.define('app.controller.Home', { 
    extend: 'Ext.app.Controller', 
    views: ['HomePage'], 
    init: function() { 

     console.log('Home controller init method...'); 
    } 
}); 

./app/view/HomePage.js

Ext.define('app.view.HomePage', { 
    extend: 'Ext.Panel', 
    alias: 'widget.homepage', 
    config: { 
     html: '<img src="http://staging.sencha.com/img/sencha.png" />' 
    }, 
    initialize: function() { 
     console.log("InitComponent for homepage"); 
     this.callParent(); 
    } 
}); 

Answer 1

在我的演示程序，我已經把我的標記邏輯在maprender方法：

首先控制器的init方法：

/** 
    * The init method will be executed first. Here we define how this controller should behave. 
    */ 
init: function() { 
    this.control({ 
     'viewport' : { 
      activeitemchange : 'handleItemChange' 
     }, 
     'map' : { 
      maprender : 'onGMapRender' 
     } 
    }); 
}, 

然後我的方法GMapRender()：

/** 
    * This method will be invoked after the google maps is rendered. 
    * Here we will define the current user location. 
    */ 
onGMapRender: function(comp, map) { 

}, 

在方法GMapRender（實際上它是方法maprender你有地圖對象，你可以做有趣的東西無線Google地圖對象。

希望這能幫助你朝正確的方向發展。