1

ビューを使用して地図上に場所を表示し、その下に小さなフォームを表示して、道順が必要な場合にユーザーの住所を取得しています。マップは、最初は希望どおりにレンダリングされます。ボタンのタップとルートによる表示の更新を処理するコントローラーがあります。ルート情報の取得に成功していることが分かります。それを表示するためにディスプレイを更新していないだけです。私は何が欠けていますか？

ビューは次のとおりです。

var tcmlatlng = new google.maps.LatLng(38.898748, -77.037684);
Ext.define('VisitTCMIndy.view.Directions',{
extend: 'Ext.Panel',
requires: [
    'Ext.form.Panel',
    'Ext.Map'
],
config: {
    layout: 'vbox',
    items: [
        {
            xtype: 'map',
            useCurrentLocation: false,
            flex: 3,
            mapOptions: {
                center: tcmlatlng,
                zoom: 15,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            },
            listeners: {
                maprender: function(map,gmap,options){
                    var homemarker = new google.maps.Marker({
                        position: tcmlatlng,
                        map: gmap
                    });
                }
            }

        },
        {
            xtype: 'formpanel',
            id: 'directionsform',
            flex: 1,
            items:[
                {
                    xtype: 'textfield',
                    name: 'address',
                    label: 'Address',
                },
                {
                    xtype: 'button',
                    ui:'action',
                    text: 'Get Directions'
                }
            ]
        }
    ]
}
});

コントローラーはこちら

Ext.define('VisitTCMIndy.controller.Directions',{
extend: 'Ext.app.Controller',
config: {
    control: {
        dButton: {
            tap: 'loaddirections'
        }
    },
    refs: {
        dButton: '#directionsform button[ui=action]',
        tcmmap:'map',
        addfield:'textfield[name=address]'
    }
},

loaddirections: function(dbutton){
    console.log('loaddirections');
    var gmap = this.getTcmmap();
    var directionsDisplay = new google.maps.DirectionsRenderer();
    var directionsService = new google.maps.DirectionsService();
    directionsDisplay.setMap(gmap.map);
    var tcmadd = "1600 Pennsylvania Ave, Washington, DC";
    var originadd = this.getAddfield().getValue();

    var request = {
        origin: originadd,
        destination: tcmadd,
        travelMode: google.maps.TravelMode.DRIVING
    };

    directionsService.route(request, function(result, status){
        console.log(status);
        if(status = google.maps.DirectionsStatus.OK){
            console.log(result);
            directionsDisplay.setDirections(result);
        }
    });
}
});
4

1 に答える 1

2

地図の参照が間違っていました。ゲッターを使用する代わりに、直接参照しようとしていました。したがって、「gmap.map」が表示されている場所はすべて「gmap.getMap()」と読む必要があります。

于 2013-02-21T16:20:39.930 に答える