`

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

阅读更多
TSP Solver for Google Maps API:https://code.google.com/p/google-maps-tsp-solver/
引入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);

    }

效果如下:




  • 描述: 路线图
  • 大小: 683.9 KB
  • 描述: 时间路程详细描述
  • 大小: 168.2 KB
分享到:
评论

相关推荐

    基于 Extjs + spring + hibernate 的OA框架

    基于 Extjs + spring + hibernate 的OA框架 基于 Extjs + spring + hibernate 的OA框架 基于 Extjs + spring + hibernate 的OA框架

    extjs+asp+access 实例

    extjs+asp+access 实例, 用IIS 即可立即调试 详细请看里面说明 同时,打包文件有个extjs3.0的javascript包,里面有个example文件夹,很多都可以copy过来改成自己的代码

    Extjs+SpringMVC+MyBaits财务管控系统

    《基于Extjs、SpringMVC和MyBatis的财务管控系统构建详解》 在现代企业信息化建设中,财务管控系统的构建至关重要,它能够帮助企业高效管理财务数据,提高运营效率,确保财务安全。本文将深入探讨如何利用Extjs、...

    最好用的通用后台管理extjs+MySQL+oracle+SQL server数据库源码

    这是本人自己总结最好用的通用后台管extjs+MySQL+oracle+SQL server数据库源码:主要运用了一下的知识: 1、主要运用的后台框架是extjs, 2、jsp+hibernate+Struts2+spring+ajax+jQuery, 3、用到了Java面向对象的...

    ExtJs+3.0+最新最全中文API帮助文档

    ExtJs+3.0+最新最全中文API帮助文档+CHM版@156_25590.exe

    Extjs+ASP.net 后台管理框架

    在本框架中,ExtJS负责处理用户界面的展示和交互,通过Ajax技术与后台进行异步通信,实现数据的动态加载和实时更新。 ASP.NET是微软的Web开发平台,它包含了开发和部署基于Web的应用程序所需的所有工具和服务。ASP...

    Extjs+Struts2实现异步文件上传

    网上有些这样的例子,但是下了几个都没有跑起来,哎,希望那些发文章的人要发就发全的,别发个半生不熟的。... 现在自己整理了一个Struts2+ExtJS2实现文异步文件上传,没法上传图片无法看到效果,直接上源码吧。

    DWR+extjs+spring+hibernate

    在IT行业中,DWR(Direct Web Remoting)是一种JavaScript库,它允许Web应用程序与服务器端的Java代码进行实时交互,从而实现动态、富客户端的Web应用。EXTJS则是一个强大的JavaScript UI框架,提供了丰富的组件和...

    结合extjs + mxgraph 网络拓扑图的开发

    extJs 跟mxgraph一样都是一种前台框架,可以混着用,这个例子将结合extjs + mxgraph 做网络拓扑图。mxgraph是将html的页面元素当做一个容器(container),并在此容器中画图的,而extJs也是将此容器包装成一个window...

    ssh+extjs+mysql整合

    - 实现业务逻辑:在Spring管理的Service层编写业务处理代码,调用DAO层的方法与数据库交互。 - 设计视图:使用ExtJS创建用户界面,定义Store从后端获取数据,绑定到组件。 - 集成:配置Struts2的Action,处理HTTP...

    EXTJS + Struct +mysql +json

    EXTJS通过Ajax技术与服务器进行异步通信,实现页面的动态更新。JSON(JavaScript Object Notation)作为轻量级的数据交换格式,由于其结构清晰、易于阅读和编写,被EXTJS广泛用于前后端的数据传输。 Structs作为MVC...

    Extjs+WEB+应用程序开发指南

    Extjs+WEB+应用程序开发指南 Extjs+WEB+应用程序开发指南 Extjs+WEB+应用程序开发指南

    Extjs+java+swf多文件上传进度条显示项目

    标题中的“Extjs+java+swf多文件上传进度条显示项目”是一个综合性的Web开发实践,涉及到前端的用户界面、后端的数据处理以及文件上传过程中进度反馈的实现。这个项目利用了Extjs库来构建用户界面,Java作为服务器端...

    extjs+ssh写的登陆系统

    EXTJS 还支持异步通信(AJAX),可以实现无刷新的登录验证,提供良好的用户体验。 SSH 框架中的 Spring 是一个全面的轻量级容器,负责管理应用的依赖注入和事务控制。在登录系统中,Spring 可能用于配置服务层和...

    ExtJS+Struts2

    ExtJS 是一个强大的JavaScript库,专门用于构建富客户端(Rich Internet Applications,RIA)的前端应用。它提供了丰富的组件模型,包括表格、面板、菜单、窗口、图表等多种UI元素,使得开发者能够创建出交互性强、...

    Extjs + Spring MVC + hibernate + mysql

    在这个项目中,"shopping1.5"可能是示例应用程序的名称,它可能是一个电子商务平台的实现,演示了如何使用ExtJS创建前端界面,Spring MVC处理业务逻辑,Hibernate进行数据持久化,以及MySQL存储数据。这个例子对于...

    ExtJs+4.1.0_API[中文版]

    ExtJs+4.1.0_API[中文版]

    EXTJS+PHP房屋中介管理系统

    在房屋中介管理系统中,EXTJS可能用于创建如表格(Grid)、表单(Form)、面板(Panel)、树形视图(Tree)等元素,以便展示房源信息、处理客户查询、管理用户账户等操作。EXTJS的Ajax功能使得页面与服务器间的通信...

    ExtJs+java(SSH)项目源码

    标题中的“ExtJs+java(SSH)项目源码”指的是一个综合了前端ExtJs框架和后端Java SSH(Struts2、Spring、Hibernate)框架的实际项目源代码。这个项目源码提供了一个完整的开发实例,可以帮助开发者深入理解如何将这...

    Extjs+Struts整合入门实例

    ExtJS 是一个强大的JavaScript库,专门用于构建富客户端的Web应用程序。它提供了丰富的组件库,包括数据网格、表格、图表等,使得开发者可以创建出功能强大且用户界面友好的网页应用。Struts,则是Java EE平台上的一...

Global site tag (gtag.js) - Google Analytics