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

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

2 голосов
/ 22 января 2012

У меня работает Google Map, работающий в 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();
    }
});

1 Ответ

1 голос
/ 31 января 2012

В моем демонстрационном приложении я поместил свою маркерную логику в метод 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 Maps.

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

...