- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
谷歌作为 API 来计算一些起点和目的地之间的路线,还有一个额外的参数叫做航点(中间路线停靠点),你可以指定你想要优化的路线,所以最终的方向将是一条经过所有路线的优化路线航点。
API:https://developers.google.com/maps/documentation/directions/#Waypoints
有什么方法可以优化路线,使其不仅优化通过航点的 channel ,还优化起点和目的地?谷歌只优化航点,起点和目的地保持不变,但如果它还说“你应该从这里开始你的路线并按顺序经过这些地点,这将是优化的路线”
最佳答案
这不是问题的真正答案,但它可能对您有所帮助。
我将位置放在可排序的框 (jQuery-UI) 中。
因此,您可以轻松更改顺序(以及开始和结束)并再次检查。
优化路由并不容易。我没有看到任何明显的解决方案。
您可能必须使用 Dijkstra 之类的算法。
如果有人有建议;他们是受欢迎的。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<style>
#map-canvas {
height: 500px;
width: 48%;
float: left;
margin: 0px;
padding: 0px
}
ul.sortable {
height: 500px;
width: 48%;
float: left;
overflow-y: auto;
}
ul.sortable li {
border: 1px solid #eee;
margin: 2px;
cursor: pointer;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script>
// list of some locations in Brussels
var locations = [
{lat: 50.8949444353626, lng: 4.34153383970260, title: 'Atomium'},
{lat: 50.8224796094648, lng: 4.39153021574020, title: 'VUB'},
{lat: 50.8348811096048, lng: 4.29784601926803, title: 'RSCA stadion'},
{lat: 50.8471595652635, lng: 4.34852904081344, title: 'AB'},
{lat: 50.8390463848631, lng: 4.37321072816848, title: 'European parliament'},
];
var locationsOrdered = [];
// generates the <li> items
function generateListItems(items) {
var content='';
for(var i=0; i<items.length; i++) {
content += '<li data-id="' + i + '">' + items[i].title + '</li>';
}
return content;
}
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
// generates the <li> items, add them to ul.sortable
var ul = generateListItems(locations);
$('ul.sortable').html(ul);
// make the <ul> sortable with jQuery-UI
locationsOrdered = locations;
$('ul.sortable').sortable({
stop: function(event, ui) {
// update the order of the items
locationsOrdered = [];
$('ul.sortable li').each(function( key, value ) {
var index = $(value).data('id'); // reads the data-id="X"; this value is the original order
locationsOrdered.push(locations[index]);
});
}
});
var my_position = new google.maps.LatLng(50.84715956, 4.3485290);
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: my_position,
zoom: 12
});
directionsDisplay.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
// based on https://developers.google.com/maps/documentation/javascript/examples/directions-waypoints
function calcRoute(locationsOrdered) {
// optimize? read the checkbox
var optimize = $('#optimize').prop('checked');
// clear all previous overlays, and distance display
directionsDisplay.setMap(null);
$('#log').empty();
//
var length = locationsOrdered.length;
var start = new google.maps.LatLng(locationsOrdered[0].lat, locationsOrdered[0].lng);
var end = new google.maps.LatLng(locationsOrdered[length - 1].lat, locationsOrdered[length - 1].lng);
var waypts = [];
var checkboxArray = document.getElementById('waypoints');
for (var i=1; i < locationsOrdered.length - 1; i++) {
waypts.push({
location: new google.maps.LatLng(locationsOrdered[i].lat, locationsOrdered[i].lng),
stopover: true
});
}
var request = {
origin: start,
destination: end,
waypoints: waypts,
optimizeWaypoints: optimize, // depends on the checkbox
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
// as Google changes the order of the waypoints, we will update the order of the <li> items
var waypoint_order = response.routes[0].waypoint_order;
for (var i=0; i<waypoint_order.length; i++) {
swapLiItem(i + 1, waypoint_order[i] + 1); // the + 1 is because the start point is not a waypoint, but it is an <li>
}
// route display
directionsDisplay.setDirections(response);
var route = response.routes[0];
// display the distances
var totalDistance = 0;
log('Waypoint distances: <br>');
for (var i = 0; i < route.legs.length; i++) {
totalDistance += route.legs[i].distance.value;
log(i +': ' + route.legs[i].distance.text + '<br>');
}
log('Total distance: ' + (totalDistance / 1000) + 'km');
directionsDisplay.setMap(map);
}
});
}
// How to set sortable items manually.
// @see http://stackoverflow.com/questions/9981563/jquery-ui-sortable-set-manually-a-position
function swapLiItem(from, to) {
$('ul.sortable li:eq(' + from + ')').insertAfter($('ul.sortable li:eq(' + to + ')'));
}
// writes a message in <div id=log"></div>
function log(message) {
$('#log').append(message);
}
</script>
</head>
<body>
<div id="map-canvas"></div>
<ul class="sortable"></ul>
<input type="button" id="go" value="Go" onclick="calcRoute(locationsOrdered)"><br>
<input type="checkbox" id="optimize" checked="checked"> auto optimize waypoints
<hr>
<div id="log"></div>
</body>
</html>
关于api - 谷歌路线优化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27680936/
我有两种类型的路由 Public 和 Private。 只有用户登录后才能访问所有私有(private)路由: return tokenService.token ? ( <>
我已按照 Laravel 5.5 文档在我们的应用程序上要求、安装和配置 Laravel Passport。我们仅使用密码授予功能,因为我们不打算将其用作社交登录工具。但是,按照所有说明操作后,我在尝
我想设置事件菜单项的样式,为此我需要将当前 url 与路由进行比较。我知道我可以在 javascript 中做到这一点,但我想知道其他人是如何解决这个问题的。 有什么建议么? 伪代码: My Page
我正在尝试在浏览器上以图形方式显示路径/路线以供客户查看。例如,基于 txt 或 XML 文件,包含说明。 4 90 5 90 2 或 F4,L90,F5,L90,F2 相当于
我创建了一个中间件来阻止我的 laravel 应用程序中的某些路由,但不起作用,无法弄清楚我做错了什么,这是我的代码: ps:我使用的是 laravel 5.2 路线: Route::get('sec
我正在使用 Java 工作。给定一个矩阵 NxM,我需要找到通过该数组的所有可能路径。只允许斜向上或斜向下,或向右斜行。 4x4 矩阵示例: 3 5 7 9 2 4 6 8 9 3 7
我是 Marionette 新手,只是找不到上类路线。 我正在使用 Marionette 的 2.4.1 版本,并尝试以最简单的方式进行操作,以便它能够正常工作。 此代码适用于旧版本的 Marione
我是 AngularJS 的新手。我正在尝试从这个网站( https://docs.angularjs.org/tutorial/step_07 )学习 AngularJS。我的代码如下 index.
我在 yandexmapkit-android 项目上工作。图书馆链接是 https://github.com/yandexmobile/yandexmapkit-android 文档非常薄弱,git
我正在阅读有关 Angular 路由的文档并创建了一个简单的测试: const routes: Route[] = [ { path: '', redirectTo: '/home', pat
我正在开发一项服务 (spring-boot),它获取一个 ID 列表,一个一个地从数据库中获取对象,将这些对象聚合成批处理,然后将它们保存在其他地方。目前,聚合后的批量大小约为 50 个对象,大约每
我正在制作一个网站,在用户登录后,用户将被重定向到主页。网站的主页和所有其他页面只能由登录用户访问,但即使在用户登录后(firebase auth),网站的其余部分( protected 路由)仍然无
我有一个惰性模块,我希望在桌面和移动设备上有不同的体验。基本上我想要我的桌面布局如下: Component1 显示一个列表,用户在列表中选择一个项目,component2 将显示详细信息。我创建了名为
我是 Angular 的新手,我正在尝试让我的路由器工作。基本上我在 / 有一个主页,其中有一个到 /courses 的路由器链接,它运行良好,但是当我重新加载 /courses 时(或输入地址in)
完整的 Mojolicious 应用程序有 routes将转储应用程序路由的命令: script/my_app.pl routes 我如何从 Lite 的测试脚本中做同样的事情应用? use Mojo
我有一个 Camel 2.13.1 应用程序,它使用我通过 CXF 组件访问的外部 Web 服务。我使用 Spring XML 路由元素的 startupOrder 属性来确保在我设置为在启动时调用一
我们有一个在 Karaf 2.4.3 和 Camel 2.15.3 上运行的数据处理应用程序。 在这个应用程序中,我们有一堆导入数据的路由。我们有一个管理 View ,其中列出了这些路由以及每条路由的
我正在尝试组合一个应用程序,我可以在其中查询谷歌路线服务,存储结果以建立缓存,然后根据需要呈现路线。 我可以取回方向数据并将其存储在数据库中就好了,这一切都很好,现在当我在 map 上渲染方向时,我的
我根据 Ryan Bates 的 railscast 使用设计登录创建了一个新项目. 它没有注册路线(与我之前制作的项目不同,步骤完全相同) This image显示了两个“rake 路由”命令。顶
我发现 Google Maps API 通过以下方式支持路线: var map; var directionsPanel; var directions; function initialize()
我是一名优秀的程序员,十分优秀!