Sencha Touch - 在 Maprender 之后向地图添加标记

Posted 2023-02-26

【中文标题】Sencha Touch - 在 Maprender 之后向地图添加标记

【英文标题】：Sencha Touch - Add Markers to Map after Maprender

【发布时间】：2011-07-17 20:52:08

【问题描述】：

在我从 ajax 请求加载一些 json 数据之后，我想在 sencha touch 中将标记加载到我的地图上。问题是我不知道在触发 maprender 事件后如何实现这一点。 我有这个：

我的地图视图：

app.views.MapTab = Ext.extend(Ext.Panel, 
    iconCls: 'map',
    id: 'map',
    items: [
        xtype: 'map',
        id: 'mapa',
        mapOptions : 
            center : new google.maps.LatLng(50.077721, 14.448585),
            zoom : 12,
            mapTypeId : google.maps.MapTypeId.ROADMAP,
            navigationControl: true,
            navigationControlOptions: 
                style: google.maps.NavigationControlStyle.DEFAULT
            
        ,
        listeners : 
            'maprender' : function(comp, map)
                Ext.dispatch(
                    controller: app.controllers.map,
                    action: 'map_rendered',
                    map: map
                );
            
        
    ],
    initComponent: function() 
        app.views.MapTab.superclass.initComponent.apply(this, arguments);
    
);

存储加载json：

app.stores.results = new Ext.data.Store(
    model: "app.models.Results",
    proxy: 
        type: 'ajax',
        url: 'http://app.cz/json_list2.php?a=l&zp=1&u=vinohrady-praha&c0=500000&c1=6000000&p0=10&p1=120&cm20=1000&cm21=120000&pg=0&s=Datumu&t=byt&age=30&pod=0&lat=50.075401&lng=14.458344&pp=prodej&tp0=0&tp1=12',
        reader: 
            type: 'json',
            root: 'markers'
        
    ,
    listeners: 
        'load': function (t, r, s) 
            Ext.dispatch(
                controller: app.controllers.map,
                action: 'loaded',
                records: r
            );
        
    
);

控制器

app.controllers.map = new Ext.Controller(

    loaded: function(options) 
        for(var i = 0; i < options.records.length; i++)
            var marker = new google.maps.Marker(
                 position: new google.maps.LatLng(options.records[i].get('lat'), options.records[i].get('lng')),
                 map: app.views.mapTab.getComponent('mapa')
            );
        
        // need to rerender/refresh the map here
    ,

    map_rendered: function(options) 
        console.log("map rendered");
    

);

【问题讨论】：

谢谢！你的问题对我很有帮助；）

【参考方案1】：

您的代码应该可以工作，但您将标记附加到 Sencha Touch Map 组件，而不是底层的 Google Maps 地图，可以使用“地图”属性访问。

...
var marker = new google.maps.Marker(
    position: new google.maps.LatLng(options.records[i].get('lat'), options.records[i].get('lng')),
    **map: app.views.mapTab.getComponent('mapa').map**
);
...

地图不需要手动重新渲染，只需在将它们与地图配置绑定时添加即可。

【讨论】：

没问题，很高兴它有帮助！ :)