Où mettre la logique Google Maps dans Sencha-Touch 2? Plusieurs marqueurs

Question

J'ai une carte Google qui fonctionne sur Google Appengine.

Je veux transformer cela en une interface mobile-friendly en utilisant (peut-être) Sencha Touch 2. Peut-être que je suis censé savoir Sencha EXT JS4 aussi bien mais je ne peux pas le voir indiqué n'importe où dans leurs docs.

Je ne connais pas très bien JavaScript. C'est mon application "apprendre en faisant".

J'ai lu les exemples dans la documentation de Sencha Touch 2 mais cela s'arrête un peu après avoir obtenu des TabPanels avec le HTML et les images de base.

Il existe d'autres exemples sur github pour les formulaires Sencha Touch 2 MVC & sur lesquels j'aimerais travailler, mais la première étape consiste à recréer ma carte fonctionnelle.

J'ai inclus le travail en cours boucle 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

Dans mon APP démo j'ai mis ma logique marqueur dans la méthode maprender:

première méthode init de l'automate:

/** 
    * 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' 
     } 
    }); 
}, 

Puis ma méthode GMapRender():

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

}, 

Dans le méthode GMapRender (en fait c'est la méthode maprender Vous avez l'objet carte où vous pouvez faire des choses amusantes wi l'objet Google Maps.

J'espère que cela vous aidera dans la bonne direction.