在sencha触摸地图中的标记

时间:2012-03-12 20:55:16

标签: sencha-touch google-maps-markers

我无法使用sencha touch在我的谷歌地图上放置任何标记。此代码可以正常工作:

Ext.setup({
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    icon: 'icon.png',
    glossOnIcon: false,
    onReady: function() {
        var position = new google.maps.LatLng(36.830618975720746,10.1987886428833);
        var position2 = new google.maps.LatLng(33.7580276912933,10.848312377929688);
        var map = new Ext.Map({
            mapOptions: {
                center: position
            },
            listeners: {
                delay: 500,
                afterrender: function(){
                    var marker = new google.maps.Marker({
                        position: position,
                        title: 'helooooooo',
                        map: map.map
                    });
                    var marker2 = new google.maps.Marker({
                        position: position2,
                        title: 'helooooooo',   
                        map: map.map
                    }); 
                }
            }
        });
        var icons = new Ext.TabPanel({
            fullscreen: true,
            items: [{
                iconCls: 'bookmarks',
                title: 'page principale',
                cls: 'card card3',
                html: 'Blaaaaaaaa'
            }, {
                iconCls: 'search',
                title: 'MapTunis',
                cls: '',
                layout: 'fit',
                items: map
            }],
            tabBar: {
                scroll: {
                    direction: 'horizontal',
                    scrollbars: false
                },
                layout: {
                    pack: 'center'
                }
            },
        });
    }
});

我自己尝试了这个代码并且运行正常。但是,当我尝试使用xtype:Map时,无论我尝试什么,它都无法工作。

App.views.Homegeoatm = Ext.extend(Ext.Panel, {
    items: [{
        xtype: 'map',
        id: 'map',
        useCurrentLocation: true,
        fullscreen: true,
        markerDesc: "salam",
        markerPos: new google.maps.LatLng (36.830618975720746,10.1987886428833),
        mapOptions: {
            zoom: 8 
        },
        listeners: {
            delay: 500,
            afterrender: function(){
                var marker = new google.maps.Marker({
                    position: position = new google.maps.LatLng (36.830618975720746,10.1987886428833),
                    map: App.views.Homegeoatm.getComponent('map').map,
                });
            }
        }
    }]
});
Ext.reg('Homegeoatm', App.views.Homegeoatm);

1 个答案:

答案 0 :(得分:5)

您需要在地图的“maprender”事件(而不是“afterrender”)上添加标记。试试这个:

listeners: {
    maprender: function(extMapComponent, googleMapComp){
       var marker = new google.maps.Marker({
       position: new google.maps.LatLng (36.830618975720746,10.1987886428833),
       map: googleMapComp,
    });
}

这应该有效(未经测试)。