煎茶触摸中的当前位置

Posted 2023-02-26

【中文标题】煎茶触摸中的当前位置

【英文标题】：Current location in sencha touch

【发布时间】：2014-03-02 18:52:27

【问题描述】：

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

                

            

        );
    

);

【参考方案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 中执行任何操作的完整文档，从指南页面开始。

【讨论】：

不使用其他变量名也不行。但如果你能帮助你的答案，我可以让它工作。 “this.getMapView().getMap()”有什么作用？我在哪里保存地图？请解释你的代码。我会检查它是否有效。