在 Sencha Touch MVC 中实现 Google Maps Directions

Posted 2023-02-26

【中文标题】在 Sencha Touch MVC 中实现 Google Maps Directions

【英文标题】：Implementing Google Maps Directions in Sencha Touch MVC

【发布时间】：2011-06-28 17:40:54

【问题描述】：

我有一家本地商店，里面有地址。我查看地址并单击“驱动器”，它将在控制器中运行以下代码：

showDirections: function(dataObj) 
        var directionsDisplay = new google.maps.DirectionsRenderer();
        var directionsService = new google.maps.DirectionsService();

        var start = '915 4th st, modesto, ca';

        var end = dataObj.data.get('address').value  + ' ' +
        dataObj.data.get('city').value + ' ' +
        dataObj.data.get('state').value + ' ' +
        dataObj.data.get('zip').value;

        var model = dataObj.model;

        var contactDrive = new MyApp.ContactDrivePanel(start, end, model);
        console.log(model);
        console.log(contactDrive)

        MyApp.viewport.setActiveItem(contactDrive, type:'slide', direction:'left');


    

这将加载以下视图：

MyApp.ContactDrivePanel = Ext.extend(Ext.Panel, 


            layout: 'fit',

            address: "",
            start: "",
            end: ""


            ,model: null

            ,constructor : function(start, end, model) 
                console.log('hello');
                this.start = start;
                this.end = end;
                this.model = model;
                console.log(this.model);
                console.log('start: ' + start);
                console.log('end: ' + end);

                MyApp.ContactDrivePanel.superclass.constructor.apply(this);
            

            ,initComponent : function () 
                var directionDisplay;
                var map;
                console.log("initializing ContactDrivePanel");
                this.dockedItems = this.buildToolbars();


                var directionsDisplay = new google.maps.DirectionsRenderer();
                var directionsService = new google.maps.DirectionsService();
                var geocoder = new google.maps.Geocoder();

                var thestart = geocoder.geocode('address': start);
                var theend = geocoder.geocode('address': end);

                var request = 
                    origin: this.start,
                    destination: this.end,
                    travelMode: google.maps.DirectionsTravelMode.DRIVING
                ;

                directionsService.route(request, function(response, status) 
                    if (status == google.maps.DirectionsStatus.OK) 
                        directionsDisplay.setDirections(response);
                    
                );

                var pnl = new Ext.Panel(
                            fullscreen: true,
                            items     : [
                                
                                    xtype             : 'map',
                                    useCurrentLocation: true
                                
                            ]
                        );


                MyApp.ContactDrivePanel.superclass.initComponent.call(this);


            ,

            buildToolbars : function() 
                console.log('Model in buildToolbars: ' + this.model);
                return [
                    
                        xtype : 'toolbar',
                        dock  : 'top',
                        title: 'Map Contact Address',
                        items : [
                            
                                text : 'Back'
                                ,ui   : 'back'
                                ,handler : this.back
                                ,scope: this // This is necessary for scoping the object's model object correctly
                            
                        ]
                    
                ]
            ,

            back : function(btn, evt) 
                console.log('Model in the back function: ' + this.model);
                Ext.dispatch(
                            controller : 'ContactFormPanelController'
                            ,action    : 'returnToDetails'
                            ,model: this.model
                        );
            ,

            setModel : function(model) 
                this.model = model;
            

        );

// Sp that lazy instantiation may be used in creating ContactMapPanels
Ext.reg('contactDrive', MyApp.ContactDrivePanel);

如您所见，我尝试了几种不同的方法。我尝试对给我错误的地址进行地理编码：'Uncaught TypeError: Cannot call method "apply" of undefined'

如果没有地理编码，它就是行不通的。我在屏幕上看到了地图，仅此而已。当然，它以帕洛阿尔托为中心。

【问题讨论】：

你知道是哪一行报错了吗？ chrome javascript 控制台应该能够向您显示堆栈跟踪。

我得到“Uncaught TypeError: Cannot call ethod 'apply' of undefined。在我的两个地理编码行上。

如果我阻止注释掉地理编码命令并阻止注释掉第二个请求变量并只使用第一个，那么我得到'未捕获的错误：main.js:1 上的未知属性 /跨度>

如果我将两个地理编码行注释掉，并阻止注释第一个 var 请求行并保留第二个 var 请求行未注释，那么我会得到桑尼维尔的地图但没有方向（但也没有错误)。

【参考方案1】：

在directionsDisplay.setDirections(response)之后添加这一行：

directionsDisplay.setMap(map.map);

将路线显示与地图联系起来

【参考方案2】：

看看这个煎茶触摸应用。它完全符合您的要求。它可能会解决您的问题。

http://septa.mobi/

【讨论】：

另一个问题是它不显示行车路线。

【参考方案3】：

不确定这是否有帮助...但是我尝试了您的代码，然后尝试了其他一些示例....我遇到了这个问题（目前看来工作正常）

对于地图：

pos = new google.maps.LatLng(lats, longs);
mapPanel = new Ext.Map(
        id : 'myMap',
        mapOptions : 
            center : pos,
            zoom : 20,
            mapTypeId : google.maps.MapTypeId.HYBRID,
            navigationControl: true,
            navigationControlOptions: 
                    style: google.maps.NavigationControlStyle.DEFAULT
                
        ,            

        plugins : new Ext.plugins.GMap.Tracker(
            trackSuspended : true,   //suspend tracking initially
            marker : new google.maps.Marker(
                position: pos,
                title : 'Working!!!!'
              ) 
            ), 

        listeners : 
            maprender : function(comp, map)
                var marker = new google.maps.Marker(
                     position: pos,
                     //title : 'Sencha HQ',
                     map: map
                );

                google.maps.event.addListener(marker, 'click', function() 
                     infowindow.open(map, marker);
                ); 


                setTimeout( function()map.panTo (pos); , 1000);

                var marker = new google.maps.Marker(
                     position: pos,
                     map: mapPanel.map
                );
            

        
    );

对于路线，我在工具栏上使用了一个带有处理程序的按钮：

handler: function()

                        var directionsDisplay = new google.maps.DirectionsRenderer();
                        var directionsService = new google.maps.DirectionsService();
                        directionsDisplay.setMap(mapPanel.map);
                        //alert("ok pressed");
                        var start = "carter road, bandra, mumbai";
                        var end = "Bandra Station, Mumbai, India";
                        var request = 
                            origin:start, 
                            destination:end,
                            travelMode: google.maps.DirectionsTravelMode.DRIVING
                        ;
                        directionsService.route(request, function(response, status) 
                            if (status == google.maps.DirectionsStatus.OK) 
                                directionsDisplay.setDirections(response);
                            
                        );
                    .........

这就是你要找的吗？它将位置设置为以您选择的任何点为中心，而不是帕洛阿尔托...以及显示带有方向的地图