Question

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

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);

正如你所看到的，我尝试了几种不同的东西。我已经尝试对地址进行地理编码，这给了我错误：'未捕获的TypeError：无法调用方法“应用”未定义的'

没有地理编码就行不通。我在屏幕上看到地图，但就是这样。当然，它以帕洛阿尔托为中心。

Answer 1

在directionsDisplay.setDirections（响应）之后添加此行：

directionsDisplay.setMap(map.map);

将directionsDisplay绑定到地图

Answer 2

查看这个sencha touch应用程序。它完全符合您的要求。它可以解决您的问题。

http://septa.mobi/

Answer 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);
                            }
                        });
                    }.........

这是你在找什么？它将位置设置为您选择的任何点的中心，而不是Palo Alto ...以及显示带有方向的地图

在Sencha Touch MVC中实施Google Maps路线

3 个答案: