如何将地图标记链接到 Sencha Touch 上的详细视图（建筑师 2）答案

【问题标题】：How to link map marker to detail view on Sencha Touch (Architect 2)如何将地图标记链接到 Sencha Touch 上的详细视图（建筑师 2）
【发布时间】：2012-05-08 18:20:47
【问题描述】：

我有一张带标记的地图，我想让标记可点击以显示一些基本信息。

我是 Sencha 的新手，我需要建议我应该在侦听器函数中实现什么以获得与单击列表项相同的效果：

例如，这是我的maprender函数代码

var lat = 37.428607;
var lng = -122.169344;


var latLng = new google.maps.LatLng(lat, lng);


var marker = new google.maps.Marker({
    position: latLng,
    map: gmap,
    draggable: false,
    animation: google.maps.Animation.DROP,
    title: 'cool'
});


var contentString = 'bla bla bla';


var infowindow = new google.maps.InfoWindow({
    content: contentString
});


google.maps.event.addListener(marker, 'click', function() {
      /* here comes something that will make my detail list visible with the marker details*/
});

并且我想让它以与我在列表中使用的“itemtap”函数相同的方式工作......像这样：

onMyListItemTap: function(dataview, index, target, record, e, options) {
this.setActiveItem('detalji');this.down('#back').show();
this.down('#detalji').setData(record.data);
}

【问题讨论】：

标签： sencha-touch-2 marker detailview

【解决方案1】：

Github 上有一个很棒的 Sencha Touch 1 示例……我相信它叫做 World Map。如果您解压缩该文件（该应用程序位于多个文件夹之一中），您可以看到带有多个自定义标记的 Google 地图。这个项目对学习非常有用，因为它不仅可以显示自定义地图标记，还可以在标记单击时弹出叠加层。

我还没有适应 Sencha Touch 2，但应该不会太难...这里是一些示例代码（添加多个标记后）：

   google.maps.event.addListener(marker, 'click', function() 
                {
        if (!this.popup) 
                    {
          this.popup = new Ext.Panel(
                            {
            floating: true,
            modal: true,
            centered: true,
            width: 500,
            styleHtmlContent: true,
            scroll: 'vertical',
            items:[{
              xtype:'button', 
              ui:'round',
              text:'See Country Profile',
              handler:goToCountryWrapper,
              scope : this
            },
            (new countryOverlay(country)).overlayPanel
            ],
                layout: {
              type: 'auto',
              padding: '55',
              align: 'left'
            },
            dockedItems: [{
              dock: 'top',
              xtype: 'toolbar',
              title: country.title
              }],
          });
        };
        this.popup.show('pop');
      });

此外，我认为根据我对 Sencha Touch 2 的了解，您必须在地图控制器（MyApp.map.controller 文件）中放置一个侦听器...。阅读有关 refs 的信息，因为 refs '发现'您已定义的标记并向项目添加侦听器。

如果您有任何进展，请发布您的发现:-)

【讨论】：