Где я могу поместить логику Google Maps в Sencha-Touch 2? Несколько маркеров

Question

У меня есть действующая карта Google, работающая в Google Appengine.

Я хочу превратить это в удобный для мобильных устройств интерфейс, используя (возможно) Sencha Touch 2. Может быть, я тоже должен знать Sencha EXT JS4, но я не могу видеть это в любом месте в своих документах.

Я не очень хорошо разбираюсь в JavaScript. Это мое приложение «учиться».

Я читал примеры в документации для Sencha Touch 2, но после коротких замыканий после получения некоторых TabPanels с базовыми html и изображениями.

Есть еще несколько примеров для github для Sencha Touch 2 MVC & форм, над которыми я бы хотел работать, но первым шагом является воссоздание моей функциональной карты.

Я включил текущий рабочий цикл Google Maps:

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 У вас есть объект карты, где вы можете делать забавные вещи wi го объекта Google Maps.

Надеюсь, что это поможет вам в правильном направлении.