Question

我正在加载我的谷歌地图，想要显示我的路线。当我把听众放在地图上时，它的效果很好。

{
                xtype: 'map',
                flex: 1,
                mapOptions: {
                    zoom: 13,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                },
                listeners: {
                    maprender : function(comp, map){;
                        var directionsDisplay = new google.maps.DirectionsRenderer();
                        var directionsService = new google.maps.DirectionsService();
                        directionsDisplay.setMap(map);

                        var start = 'New York';
                        var end = 'Chicago';
                        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);
                            }
                        });
                    }
                }

当我将监听器移动到updateRecord以便我可以从记录中开始和结束时，我的maprender监听器就不会启动。

updateRecord: function(newRecord) {
        if (newRecord) {
            var record = newRecord;
            this.down('map').setListeners({
                maprender : function(comp, map){
                    var tripsStore= Ext.getStore('Trips');
                    var directionsDisplay = new google.maps.DirectionsRenderer();
                    var directionsService = new google.maps.DirectionsService();
                    directionsDisplay.setMap(map);
                    //alert("ok pressed");
                    console.log
                    var start = record.data.from;
                    var end = record.data.to;
                    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);
                        }
                    });
                }
            });
        }
    },

我有什么想法可以解决这个问题吗？

Answer 1

我将整个地图渲染事物添加到更新记录中，现在工作正常。

updateRecord: function(newRecord) {
    if (newRecord) {
        this.down('#content').setData(newRecord.data);
        this.down('map').setData(newRecord.data);
    };
    //GET MAP
    var map = this.down('map').getMap();
    //console.log(map);
    var directionsDisplay = new google.maps.DirectionsRenderer();
    var directionsService = new google.maps.DirectionsService();
    //SET map
    directionsDisplay.setMap(map);
    //get data
    var mapData = this.down('map').getData();
    //SET DATA
    var start = mapData.from;
    var end = mapData.to;
    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);
            var miles = Ext.getCmp('miles'),
            distance = Math.floor(response.routes[0].legs[0].distance.value / 1000),
            minutes = Math.floor(response.routes[0].legs[0].duration.value / 60);
            miles.setHtml("Distance: " + distance + " kilometers.<br/> Time: " + minutes + " minutes.");
        }
    });
    Ext.device.Geolocation.getCurrentPosition({
        success: function(position) {
            var long = position.coords.longitude,
                lat = position.coords.latitude;
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(lat,long),
                title : 'Me',
                map: map
            });
        },
        failure: function() {
            console.log('something went wrong!');
        }
    });
},

如何在更新记录中监听maprender

1 个答案: