2012-06-04 68 views
0

我正在構建一個包含地址列表的應用程序。這個應用程序的工作方式是,一旦用戶點擊列表中的每個項目(地址),下一個頁面將顯示一張地圖,而地圖上會有一個標記,指向點擊地址的確切位置。由於代碼中所述的緯度和經度座標,這成爲可能。 我的問題是我有多個地址,並且每個地址都有唯一的經度和緯度。我想讓我的應用程序以這樣的方式工作,即當用戶點擊他們感興趣的任何地址時,應用程序將打開一個頁面並顯示地圖和指向地圖上地址確切位置的標記。我的代碼如下:它工作正常,但當用戶點擊地址時,它會將它們置於相同的經度和緯度。Sencha Touch 2 Sencha地圖上的多個經度和緯度

我的商店:

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 : "Ikhlas HQ", 
     lastName : "Tower 11A, Avenue 5, Bangsar South, No.8 Jalan Kerinchi 59200 Kuala Lumpur", 
     latitude : 3.110649, 
     longitude : 101.664991, 
     id: 'm12', 
    }, 
    { 
     firstName : "PEJABAT WILAYAH SELANGOR", 
     lastName : "No. 97, 97-1 & 97-2, Jalan Mahogani 5/KS7, Ambang Botanic, 41200 Klang, Selangor", 
     latitude : 3.003384, 
     longitude : 101.45256, 
     id: 'm1', 
    }, ] 

} 
}); 

我的控制器:

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(comp, map) { 
       var position = new google.maps.LatLng(5.978132,116.072617); 
       var marker = new google.maps.Marker({ 
        position: position, 
        map: map 
         }); 
      google.maps.event.addListener(marker, 'click', function() { 
        infowindow.open(map, marker); 
         }); 
      setTimeout(function() { 
        map.panTo(position); 
       }, 1000); 

       }, 
      }, 
     }) 
    }, 
}); 

我的觀點:

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 
       } 
      }, 
    } 


}); 

我的模型:

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(" "); 
} 
}); 

請幫我解決。我需要列表中的每個地址都標有經度和緯度,這樣當用戶點擊地址時,它會指向地圖的確切位置。

回答

0

看看GitHub上的kentuni應用程序。它採用sencha touch v1並使用小冊子,但它應該是一個很好的參考 - 它完全符合你想要的位置列表,當點擊時用標記推動地圖視圖。

+0

感謝Digeridoopoo,我會檢查出來,並將上傳我的控制器給其他人蔘考。 –

+0

在GitHub上搜索'unikent'。我認爲它現在甚至可能在sencha touch 2中,我昨天下載了它來看看。它們將標記位置存儲在.json文件中並調用它們。 – Digeridoopoo