Использование маркера для определения определенного адреса на карте (Sencha Touch 2) Sencha Map

Question

Я пытаюсь создать приложение, которое дает пользователю направление, когда он или она нажимает на адрес. Структура моего приложения идет следующим образом:

Мне удалось скомпилировать весь адрес, который я хочу в форме списка, то есть пользователь может щелкнуть по адресу, и он загрузит вторую страницу. на картинке ниже:

На рисунке выше показано мое текущее приложение и текущий этап разработки, который застрял там, когда приложение загружает его, показывает страницу А, а когда вы нажимаете на любой из адресов, на стр. B. Страница моего приложения должна быть Карта с маркером, отображающая точное местоположение адреса на карте и, если возможно, направление движения к точному адресу от текущего местоположения пользователей. Посмотрите на картинке ниже:

Второе изображение - это именно то, чего я хочу достичь, а это означает, что, как только пользователь нажмет на любой из адресов, карта покажет маркер, указывающий точное местоположение адреса (Широта и долгота), мне нужно точно так же, как выглядит изображение.

моих кодов являются следующим: На моем взгляде панели, я имею следующие коды:

Ext.define('List.view.PresidentList', { 
extend: 'Ext.List', 
xtype: 'presidentlist', 
requires: ['List.store.Presidents'], 

config: { 
    xtype:'container', 
    title: 'Takaful Branch', 
    //grouped: true, 
    itemTpl: '{firstName} {lastName}', 
    styleHtmlContent: true, 
    store: 'Presidents', 
    onItemDisclosure: true, 


} 

});

также в панели просмотра у меня есть:

Ext.define('List.view.PresidentDetail', { 
extend: 'Ext.Panel', 
xtype: 'presidentdetail', 

config: { 
    title: 'Details', 
    styleHtmlContent: true, 
    scrollable: 'vertical', 
    tpl: [ 
     'Google Map Goes Here' 
     ] 
} 

});

последний файл в моей папке просмотра является:

Ext.define('List.view.Main', { 
extend: 'Ext.navigation.View', 
xtype: 'mainpanel', 
requires: [ 
    'List.view.PresidentList', 
    'List.view.PresidentDetail' 
], 

config: { 
    items: [ 
    { 
     xtype: 'presidentlist' 
    }, 
    ] 
} 

});

Это мой STORE:

Ext.define('List.store.Presidents', { 
extend: 'Ext.data.Store', 

config: { 
    model: 'List.model.President', 
    sorters: 'lastName', 
    grouper : function(record) { 
     return record.get('lastName')[0]; 
    }, 
    data: [ 

     { firstName: "PEJABAT WILAYAH SARAWAK", lastName: "Ground, 1st & 3rd Floor, Section 6, Kuching Town Land District (KTLD), Jalan Kulas, 93400 Kuching, Sarawak" }, 
     { firstName: "PEJABAT WILAYAH TERENGGANU", lastName: "Lot PT 3593, Ground, Mezzanine & 1st Floor, Jalan Sultan Zainal Abidin, 20000 Kuala Terengganu, Terengganu" }, 
     { firstName: "PEJABAT WILAYAH MELAKA", lastName: "No. 10, Jalan Melaka Raya 8, Taman Melaka Raya, 75000, Melaka. " }, 



    ] 
} 

});

Это моя модель:

Ext.define('List.model.President', { 
extend: 'Ext.data.Model', 
config: { 
    fields: ['firstName', 'middleInitial', 'lastName'] 
}, 

fullName: function() { 
    var d = this.data, 
    names = [ 
     d.firstName, 
     (!d.middleInitial ? "" : d.middleInitial + "."), 
     d.lastName 
    ]; 
    return names.join(" "); 
} 

});

Наконец мой CONTROLLER:

Ext.define('List.model.President', { 
extend: 'Ext.data.Model', 
config: { 
    fields: ['firstName', 'middleInitial', 'lastName'] 
}, 

fullName: function() { 
    var d = this.data, 
    names = [ 
     d.firstName, 
     (!d.middleInitial ? "" : d.middleInitial + "."), 
     d.lastName 
    ]; 
    return names.join(" "); 
} 

});

у меня есть точные координаты адреса в моем магазине: первый Адрес: Широта: 4,600381 Долгота: 101,094174 второй Адрес: Широта: 5,336649 Долгота: 103,142497 Третий Адрес: Широта: 2,184044 Долгота: 102,25982

Будете ждать ответов, пока я все еще самостоятельно изучаю, чтобы понять, что происходит. Я верю, что ваши ответы помогут мне и помогут многим другим с подобной проблемой.Благодаря

---

Мой магазин:

Ext.define('List.store.Presidents', { 
extend : 'Ext.data.Store', 
config : { 
    model : 'List.model.President', 
    sorters : 'lastName', 
    grouper : function(record) { 
     return record.get('lastName')[0]; 
    }, 
    data : [{ 
     firstName : "PEJABAT WILAYAH SARAWAK", 
     lastName : "Ground, 1st & 3rd Floor, Section 6, Kuching Town Land District (KTLD), Jalan Kulas, 93400 Kuching, Sarawak", 
     latitude : 4.600381 , 
     longitude : 101.094174 
    }, { 
     firstName : "PEJABAT WILAYAH TERENGGANU", 
     lastName : "Lot PT 3593, Ground, Mezzanine & 1st Floor, Jalan Sultan Zainal Abidin, 20000 Kuala Terengganu, Terengganu", 
     latitude : 5.336649, 
     longitude : 103.142497 
    }, { 
     firstName : "PEJABAT WILAYAH MELAKA", 
     lastName : "No. 10, Jalan Melaka Raya 8, Taman Melaka Raya, 75000, Melaka. ", 
     latitude : 2.184044, 
     longitude : 102.25982 
    }] 
} 

});

Мой контроллер:

Ext.define('List.controller.Main', { 
extend: 'Ext.app.Controller', 

config: { 

    control: { 
     'presidentlist': { 
      disclose: 'showDetail' 
     }, 
    } 
}, 
showDetail: function(list, record) { 
      this.getMain().push({ 
       xtype: 'presidentdetail', 
       title: record.fullName(), 

listeners: { 
      maprender: function(component, map, geo, eOpts) { 
       var position = new google.maps.LatLng(2.184044,102.25982); 
       var marker = new google.maps.Marker({ 
        position: position, 
        map: map 
         }); 

       var infowindow = new google.maps.InfoWindow({ 
        content: 'Working Fine <br /> I have been working On you', 


         }); 

      google.maps.event.addListener(marker, 'click', function() { 
        infowindow.open(map, marker); 
         }); 

      setTimeout(function() { 
        map.panTo(position); 
       }, 1000); 

       }, 
      }, 
     }) 
    }, 
}); 

Моя модель:

Ext.define('List.model.President', { 
extend : 'Ext.data.Model', 
config : { 
    fields : ['firstName', 'middleInitial', 'lastName', 'latitude', 'longitude'] 
}, 
fullName : function() { 
    var d = this.data, names = [d.firstName, (!d.middleInitial ? "" : d.middleInitial + ".")]; 
    return names.join(" "); 
} 
}); 

Мое мнение:

Ext.define('List.view.PresidentDetail', { 
extend : 'Ext.Map', 
xtype: 'presidentdetail', 

    config: { 
       title: 'Details', 
       styleHtmlContent: true, 
       scrollable: 'vertical', 
       //useCurrentLocation: true, 
       layout: 'fit', 

    mapOptions: { 
       //zoom: 16, 
       mapTypeId: google.maps.MapTypeId.ROADMAP, 
       navigationControl: true, 
       navigationControlOptions: { 
       style: google.maps.NavigationControlStyle.DEFAULT 
       } 
      }, 
} 


}); 

До сих пор результаты кода выше так же, как на картинке выше, и может отображать только одну широту и долготу для 3 элементов в списке. Теперь моя проблема заключается в том, чтобы заставить его работать таким образом, что, как только пользователь коснется любого из элементов в списке, он покажет точную широту и долготу этого конкретного адреса. пожалуйста, помогите мне изучить логику моего приложения (контроллера). Благодаря

Answer 1

Вы сами по себе дорогу, но he're падение булавки (Предполагая, что вы добавить широту/долготу к вашей модели и передать модель в виду, когда его создатель):

Ext.define('List.view.PresidentDetail', { 
    extend : 'Ext.Map', 
    xtype : 'presidentdetail', 
    config : { 
     title : 'Details', 
     styleHtmlContent : true, 
     scrollable : 'vertical', 
     president: null 
    }, 
    onGeoUpdate : function(geo) { 
     if (geo) { 
      this.fireEvent('setcenter', this, this.getMap(), geo); 
     } 
    } 
}); 

И в контроллере:

Ext.define('List.controller.PresidentDetailController', { 
    extend : 'Ext.app.Controller', 
    config : { 
     control : { 
      'presidentdetail' : { 
       activate : 'activateGPS', 
       setcenter : 'dropPins' 
      } 
     }, 
     markersArray : [], 
    }, 
    activateGPS : function(container, options){ 
     container.setUseCurrentLocation(true); 
    }, 
    dropPins : function(component, map, geo, eOpts) { 
     //only do this the first time? 
     //geo updates are constantly recieved so turn useCurrentLocation off 
     comp.setUseCurrentLocation(true); 

     //Remove all markers from the map. 
     for(var i = 0; i < this.getMarkersArray().length; i++) { 
      this.getMarkersArray()[i].setMap(null); 
     } 
     this.setMarkersArray(Array()); 

     var currentPosition = new google.maps.LatLng(geo.getLatitude(), geo.getLongitude()); 
     var yourLocationMarker = new google.maps.Marker({ 
       position : currentPosition, 
       title : 'Current Location', 
       map : map 
      }); 
     self.getMarkersArray().push(yourLocationMarker); 

     var president = comp.getPresident(); 
     var presidentsPosition = new google.maps.LatLng(president.getLatitude(), president.getLongitude()); 
     var yourLocationMarker = new google.maps.Marker({ 
       position : presidentsPosition, 
       title : president.fullName(), 
       map : map 
      }); 
     self.getMarkersArray().push(presidentsPosition); 
    } 
}); 

EDIT Вот модель с широтой и долготой полей добавлено:

Ext.define('List.model.President', { 
    extend : 'Ext.data.Model', 
    config : { 
     fields : ['firstName', 'middleInitial', 'lastName', 'latitude', 'longitude'] 
    }, 
    fullName : function() { 
     var d = this.data, names = [d.firstName, (!d.middleInitial ? "" : d.middleInitial + "."), d.lastName]; 
     return names.join(" "); 
    } 
}); 

И магазин с дополнительными полями:

Ext.define('List.store.Presidents', { 
    extend : 'Ext.data.Store', 
    config : { 
     model : 'List.model.President', 
     sorters : 'lastName', 
     grouper : function(record) { 
      return record.get('lastName')[0]; 
     }, 
     data : [{ 
      firstName : "PEJABAT WILAYAH SARAWAK", 
      lastName : "Ground, 1st & 3rd Floor, Section 6, Kuching Town Land District (KTLD), Jalan Kulas, 93400 Kuching, Sarawak", 
      latitude : 4.600381 , 
      longitude : 101.094174 
     }, { 
      firstName : "PEJABAT WILAYAH TERENGGANU", 
      lastName : "Lot PT 3593, Ground, Mezzanine & 1st Floor, Jalan Sultan Zainal Abidin, 20000 Kuala Terengganu, Terengganu", 
      latitude : 5.336649, 
      longitude : 103.142497 
     }, { 
      firstName : "PEJABAT WILAYAH MELAKA", 
      lastName : "No. 10, Jalan Melaka Raya 8, Taman Melaka Raya, 75000, Melaka. ", 
      latitude : 2.184044, 
      longitude : 102.25982 
     }] 
    } 
});