煎茶触摸中的当前位置

Question

我正在使用以下代码在 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.');
                            }

                }

            }

        });
    }

});

Answer 1

旧答案

将它与我用于相同目的的 sn-p 进行比较（如下所示），我意识到问题很简单。 “中心”是保留字。尝试使用不同的变量名。

部分编辑：删除代码 sn-ps。

新答案

我环顾四周，发现您的“项目”只是演示代码的零碎集合。

这是一个完整的代码解决方案，为简单起见删除了所有多余的部分，以及变量的过度使用，也扩展为一种冗长的格式以显而易见。

/*
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!');
                }
            });
        }
    }
});

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

为此，它需要 Sencha Touch 库以及以下行：

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

这是在您的页面中包含 Google 地图的脚本，对于显示至关重要。

了解更多：

https://www.sencha.com/learn/hello-world/ - 开始

http://docs.sencha.com/touch/2.3.1/#!/guide - 关于如何在 Sencha Touch 中执行任何操作的完整文档，从指南页面开始。