Google maps sencha touch中的当前位置

我使用以下代码在Sencha Touch 2上显示我的当前位置。它在console.log（）中显示正确的纬度，但不显示地图。请帮忙

Ext.define('restApp.view.GreetingView', {
    extend: 'Ext.Map',
     alias: 'widget.mymap',


    config: {
        fullscreen: true,
        //tpl: '<p>The ID is {uuid}</p><p>The content is {display}</p>',
        layout: {
            type: 'fit'
        }

    },

    initialize:function(){

        Ext.Viewport.add({

        xtype: 'map',
        id:'geomap',
        itemId:'ma'

});
           var geo = Ext.create('Ext.util.Geolocation', {
              autoUpdate: true,
              frequency: '10000',

                    listeners: {
                        locationupdate: function (geo) {        

                            var center = new google.maps.LatLng(geo.getLatitude(), geo.getLongitude());
                            Ext.getCmp('geomap').setData(center);
                            //restApp.view.GreetingView.getComponent('ma').update(center);

                            var marker = new google.maps.Marker({
                                position: center,
                                map: Ext.getCmp('geomap').map
                            });

                            console.log('New latitude: '+ geo.getLatitude());

                        },

                        locationerror: function (geo, bTimeout, bPermissionDenied, bLocationUnavailable, message) {

                            if (bTimeout) {
                                alert('Timeout occurred.');
                            } 
                            else {
                                alert('Error occurred.');
                            }

                }

            }

        });
    }

});

Ext.define（'restApp.view.GreetingView'{
扩展：“Ext.Map”，
别名：“widget.mymap”，
配置：{
全屏：对，
//tpl:“ID为{uuid}
内容为{display}
”，
布局：{
类型：“适合”
}
},
初始化：函数（）{
Ext.Viewport.add({
xtype:'map'，
id:'geomap'，
itemId:'ma'
});
var geo=Ext.create（'Ext.util.Geolocation'{
自动更新：正确，
频率：“10000”，
听众：{
位置更新：功能（地理）{
var center=new google.maps.LatLng（geo.getLatitude（），geo.getLongitude（））；
Ext.getCmp（'geomap'）.setData（中心）；
//restApp.view.GreetingView.getComponent（'ma'）.update（中心）；
var marker=new google.maps.marker({
位置：中，
地图：Ext.getCmp（'geomap'）.map
});
log（'New latitude:'+geo.getLatitude（））；
},
locationerror:函数（geo、bTimeout、bPermissionDenied、bLocationUnavailable、message）{
如果（b超时）{
警报（'发生超时'）；
} 
否则{
警报（'发生错误'）；
}
}
}
});
}
});

旧答案 将它与我用于相同目的的代码片段（如下所示）进行比较，我意识到问题很简单。“中心”是一个保留字。尝试使用其他变量名

编辑的一部分：删除代码段

新答案 我环顾四周，发现你的“项目”只是演示代码的零碎集合

这是一个完整的代码解决方案，为了简单起见，删除了所有多余的部分，并过度使用了变量，显然，它还扩展到了冗长的格式

/*
The application, including a simple launcher.
*/

Ext.application({
    requires    : ['Ext.device.Geolocation'],
    views       : ['MainView'],
    controllers : ['Maps'],
    name        : 'Geo',

    launch: function() {
        Ext.create('Geo.view.MainView', {fullscreen: true});
    }
});

/*
The View to display the map, as well as how to include the navigation bar
and include a "you are here" button.
*/

Ext.define('Geo.view.MainView', {
    extend: 'Ext.navigation.View',
    alias: 'widget.mainview',

    requires: [
        'Ext.Panel',
        'Ext.Map',
        'Ext.navigation.Bar',
        'Ext.Button'
    ],

    config: {
        items: [
            {
                xtype  : 'panel',
                title  : 'Map',
                itemId : 'mapPanel',
                items  : [
                    {
                        xtype: 'map',
                        height: '100%',
                        itemId: 'map'
                    }
                ]
            }
        ],
        navigationBar: {
            docked: 'top',
            items: [
                {
                    xtype: 'button',
                    itemId: 'youAreHereButton',
                    text: 'You Are Here'
                }
            ]
        }
    }
});


/* 
The Controller with functionality for the "you are here" button tap 
*/
Ext.define('Geo.controller.Maps', {
    extend: 'Ext.app.Controller',

    config: {
        refs: {
            mapView: {
                selector: 'mainview #map',
                xtype: 'Ext.Map'
            },
            mainView: {
                selector: 'mainview',
                xtype: 'Ext.navigation.View'
            }
        },

        control: {
            "mainview #youAreHereButton": {
                tap: 'onYouAreHereTap'
            }
        }
    },

    onYouAreHereTap: function(button, e, eOpts) {
        // set 'mapView' as the parent view displaying the map
        var mapView = this.getMapView();

        // control measure for old browsers or denied permission for location detection.
        if (Ext.feature.has.Geolocation) {
            /*
            Ext.device.Geolocation uses native (phone) Geolocation capabilities if available,
            and falls back to Ext.util.Geolocation if only browser support detected.
            */
            Ext.device.Geolocation.getCurrentPosition({
                allowHighAccuracy : true,
                maximumAge        : 0,
                timeout           : 20000,
                success           : function(position) {
                    var latitude  = position.coords.latitude,
                        longitude = position.coords.longitude,
                        location  = new google.maps.LatLng(latitude, longitude),
                        marker    = new google.maps.Marker({
                            position  : location,
                            map       : mapView.getMap(),
                            animation : google.maps.Animation.DROP
                        });

                    mapView.setMapOptions({   // Move to the center
                        center: location
                    });
                },
                failure: function() {
                    console.log('something went wrong!');
                }
            });
        }
    }
});

是的，我可以将它进一步简化为一个视图，其中还包含控制器的“you is here”点击处理程序。我选择以这种方式展示它，以帮助您理解MVC模式及其在Sencha Touch中的应用

要使其工作，需要Sencha Touch库以及以下行：

<script src="http://maps.google.com/maps/api/js?sensor=true"></script>

这是一个脚本，它在你的页面中包含了谷歌地图，对于显示它是必不可少的

了解更多信息：

-开始

---

-从指南页面开始，完整说明如何在Sencha Touch中执行任何操作。

不使用其他变量名称也不起作用。但是如果你能帮我回答问题，我就能让它发挥作用。“this.getMapView（）.getMap（）”有什么作用？我把地图放在这里的什么地方？请解释你的代码。我会检查它是否有效。