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+asp+access 实例, 用IIS 即可立即调试 详细请看里面说明 同时,打包文件有个extjs3.0的javascript包,里面有个example文件夹,很多都可以copy过来改成自己的代码
《基于Extjs、SpringMVC和MyBatis的财务管控系统构建详解》 在现代企业信息化建设中,财务管控系统的构建至关重要,它能够帮助企业高效管理财务数据,提高运营效率,确保财务安全。本文将深入探讨如何利用Extjs、...
这是本人自己总结最好用的通用后台管extjs+MySQL+oracle+SQL server数据库源码:主要运用了一下的知识: 1、主要运用的后台框架是extjs, 2、jsp+hibernate+Struts2+spring+ajax+jQuery, 3、用到了Java面向对象的...
ExtJs+3.0+最新最全中文API帮助文档+CHM版@156_25590.exe
在本框架中,ExtJS负责处理用户界面的展示和交互,通过Ajax技术与后台进行异步通信,实现数据的动态加载和实时更新。 ASP.NET是微软的Web开发平台,它包含了开发和部署基于Web的应用程序所需的所有工具和服务。ASP...
网上有些这样的例子,但是下了几个都没有跑起来,哎,希望那些发文章的人要发就发全的,别发个半生不熟的。... 现在自己整理了一个Struts2+ExtJS2实现文异步文件上传,没法上传图片无法看到效果,直接上源码吧。
在IT行业中,DWR(Direct Web Remoting)是一种JavaScript库,它允许Web应用程序与服务器端的Java代码进行实时交互,从而实现动态、富客户端的Web应用。EXTJS则是一个强大的JavaScript UI框架,提供了丰富的组件和...
extJs 跟mxgraph一样都是一种前台框架,可以混着用,这个例子将结合extjs + mxgraph 做网络拓扑图。mxgraph是将html的页面元素当做一个容器(container),并在此容器中画图的,而extJs也是将此容器包装成一个window...
- 实现业务逻辑:在Spring管理的Service层编写业务处理代码,调用DAO层的方法与数据库交互。 - 设计视图:使用ExtJS创建用户界面,定义Store从后端获取数据,绑定到组件。 - 集成:配置Struts2的Action,处理HTTP...
EXTJS通过Ajax技术与服务器进行异步通信,实现页面的动态更新。JSON(JavaScript Object Notation)作为轻量级的数据交换格式,由于其结构清晰、易于阅读和编写,被EXTJS广泛用于前后端的数据传输。 Structs作为MVC...
Extjs+WEB+应用程序开发指南 Extjs+WEB+应用程序开发指南 Extjs+WEB+应用程序开发指南
标题中的“Extjs+java+swf多文件上传进度条显示项目”是一个综合性的Web开发实践,涉及到前端的用户界面、后端的数据处理以及文件上传过程中进度反馈的实现。这个项目利用了Extjs库来构建用户界面,Java作为服务器端...
EXTJS 还支持异步通信(AJAX),可以实现无刷新的登录验证,提供良好的用户体验。 SSH 框架中的 Spring 是一个全面的轻量级容器,负责管理应用的依赖注入和事务控制。在登录系统中,Spring 可能用于配置服务层和...
ExtJS 是一个强大的JavaScript库,专门用于构建富客户端(Rich Internet Applications,RIA)的前端应用。它提供了丰富的组件模型,包括表格、面板、菜单、窗口、图表等多种UI元素,使得开发者能够创建出交互性强、...
在这个项目中,"shopping1.5"可能是示例应用程序的名称,它可能是一个电子商务平台的实现,演示了如何使用ExtJS创建前端界面,Spring MVC处理业务逻辑,Hibernate进行数据持久化,以及MySQL存储数据。这个例子对于...
ExtJs+4.1.0_API[中文版]
在房屋中介管理系统中,EXTJS可能用于创建如表格(Grid)、表单(Form)、面板(Panel)、树形视图(Tree)等元素,以便展示房源信息、处理客户查询、管理用户账户等操作。EXTJS的Ajax功能使得页面与服务器间的通信...
标题中的“ExtJs+java(SSH)项目源码”指的是一个综合了前端ExtJs框架和后端Java SSH(Struts2、Spring、Hibernate)框架的实际项目源代码。这个项目源码提供了一个完整的开发实例,可以帮助开发者深入理解如何将这...
ExtJS 是一个强大的JavaScript库,专门用于构建富客户端的Web应用程序。它提供了丰富的组件库,包括数据网格、表格、图表等,使得开发者可以创建出功能强大且用户界面友好的网页应用。Struts,则是Java EE平台上的一...