extjs+google map+TSP Solver实现最佳路线

TSP Solver for Google Maps API:[url]https://code.google.com/p/google-maps-tsp-solver/[/url]
引入BpTspSolver.js,tsp.js
引入Ext的GMapPanel.js

/**
 * @author Shea Frederick
 */
Ext.define('Ext.ux.GMapPanel', {
    extend: 'Ext.panel.Panel',

    alias: 'widget.gmappanel',

    requires: ['Ext.window.MessageBox'],

    initComponent : function(){
        Ext.applyIf(this,{
            plain: true,
            gmapType: 'map',
            border: false
        });

        this.callParent();        
    },

    afterFirstLayout : function(){
        var center = this.center;
        this.callParent();       

        if (center) {
            if (center.geoCodeAddr) {
                this.lookupCode(center.geoCodeAddr, center.marker);
            } else {
                this.createMap(center);
            }
        } else {
            Ext.Error.raise('center is required');
        }
    },

    createMap: function(center, marker) {
        var options = Ext.apply({}, this.mapOptions);

        options = Ext.applyIf(options, {
            zoom: 14,
            center: center,
            mapTypeId: google.maps.MapTypeId.HYBRID
        });
        this.gmap = new google.maps.Map(this.body.dom, options);
        if (marker) {
            this.addMarker(Ext.applyIf(marker, {
                position: center
            }));
        }

        Ext.each(this.markers, this.addMarker, this);
        this.fireEvent('mapready', this, this.gmap);
    },

    addMarker: function(marker) {
        marker = Ext.apply({
            map: this.gmap
        }, marker);

        if (!marker.position) {
            marker.position = new google.maps.LatLng(marker.lat, marker.lng);
        }
        var o =  new google.maps.Marker(marker);
        Ext.Object.each(marker.listeners, function(name, fn){
            google.maps.event.addListener(o, name, fn);    
        });
        return o;
    },

    lookupCode : function(addr, marker) {
        this.geocoder = new google.maps.Geocoder();
        this.geocoder.geocode({
            address: addr
        }, Ext.Function.bind(this.onLookupComplete, this, [marker], true));
    },

    onLookupComplete: function(data, response, marker){
        if (response != 'OK') {
            Ext.MessageBox.alert('Error', 'An error occured: "' + response + '"');
            return;
        }
        this.createMap(data[0].geometry.location, marker);
    },

    afterComponentLayout : function(w, h){
        this.callParent(arguments);
        this.redraw();
    },

    redraw: function(){
        var map = this.gmap;
        if (map) {
            google.maps.event.trigger(map, 'resize');
        }
    }

});

在创建地图时将创建的gpanel赋予tsp即可

		Ext.Ajax.request({
            url: '../controller/plan/getMap',
			params:{
				planId : rec.planId
			},
			method: 'GET',
            success: function(response){
				var data = Ext.JSON.decode(response.responseText);
				ttsGMapPanel = Ext.create('APP.view.common.TTSGMapPanel',{
					title:	rec.description,
					closable: true,
					closeAction: 'destroy',
					region:'44',
					routeParams:{
						origin: 		data.origin,
						destination: 	data.destination,
						routeCenter: 	data.routeCenter,
						waypoints: 		data.waypoints
					}
				});
				var myMainPanel = myPlansPanel.up('#mainTabPanel');
				myMainPanel.add(ttsGMapPanel);
				myMainPanel.setActiveTab(ttsGMapPanel);
            }
        });

       calRoute: function(params, gmap){
    	        var me		 	= this,
			routeParams = me.routeParams,
			waypoints 	= routeParams.waypoints;

		var directionsEl = Ext.getDom(me.directionsPanel.body);
		var timeAndLength_Panel = Ext.getDom(me.timeAndLengthPanel.body);

		var temp = new Array();
		for (x in waypoints){
			if(waypoints[x].location!=routeParams.origin.location&&waypoints[x].location!=routeParams.destination.location){
				 temp[temp.length] = waypoints[x];
			}	   
	    }
		waypoints = temp;
		loadAtStart(gmap,directionsEl,timeAndLength_Panel,waypoints,routeParams.origin,routeParams.destination);

    }

效果如下：

[img]http://dl2.iteye.com/upload/attachment/0088/1214/7c829667-1999-36ab-af83-60008f8e63f4.png[/img]


[img]http://dl2.iteye.com/upload/attachment/0088/1218/63b875fc-bf9b-355c-99b2-3626b18370b7.png[/img]