个人中心
gpt4 book ai didi

javascript - 处理超过 23 个航点的方法 Google map

转载 作者：行者123 更新时间：2023-12-01 15:47:46 24 4
gpt4 key购买 nike

我按照 mikep 发布的以下引用资料处理了超过 23 个具有首要许可证的航点，它确实处理了超过 23 个航点，但它没有考虑具有 28 个航点的最佳路线。请在下面找到代码片段。如果我错过了什么，请告诉我。

引用:Exceed 23 waypoint per request limit on Google Directions API (Business/Work level)

enter image description here

<!DOCTYPE html>
<html>
  <head>
    <title>Distance Matrix service</title>
    <style>
      #right-panel {
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 10px;
      }

      #right-panel select, #right-panel input {
        font-size: 15px;
      }

      #right-panel select {
        width: 100%;
      }

      #right-panel i {
        font-size: 12px;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
        width: 50%;
      }
      #right-panel {
        float: right;
        width: 48%;
        padding-left: 2%;
      }
      #output {
        font-size: 11px;
      }
    </style>
  </head>
  <body>
    <div id="right-panel">
      <div id="inputs">
        <pre>
var origin1 = {lat: 55.930, lng: -3.118};
var origin2 = 'Greenwich, England';
var destinationA = 'Stockholm, Sweden';
var destinationB = {lat: 50.087, lng: 14.421};
        </pre>
      </div>
      <div>
        <strong>Results</strong>
      </div>
      <div id="output"></div>
    </div>
    <div id="map"></div>
    <script>
  function initMap() {
    var service = new google.maps.DirectionsService;
    var map = new google.maps.Map(document.getElementById('map'));

    // list of points
    
    // list of points
    var stations = [
    {lat: 42.304403, lng: -89.04231900000002, name: 'Station 1'}, 
{lat: 42.236168, lng: -88.54327699999999, name: 'Station 2'}, 
{lat: 42.234782, lng: -88.53974299999999, name: 'Station 3'}, 
{lat: 42.151208, lng: -88.47053599999998, name: 'Station 4'}, 
{lat: 42.159458, lng: -88.44529899999998, name: 'Station 5'}, 
{lat: 42.157442, lng: -88.45886899999999, name: 'Station 6'}, 
{lat: 42.187703, lng: -88.36313100000001, name: 'Station 7'}, 
{lat: 42.188238, lng: -88.34060099999999, name: 'Station 8'}, 
{lat: 42.185022, lng: -88.309731, name: 'Station 9'}, 
{lat: 42.17901, lng: -88.32207499999998, name: 'Station 10'}, 
{lat: 42.165468, lng: -88.322519, name: 'Station 11'},
{lat: 41.91145, lng: -88.30584899999997, name: 'Station 12'}, 
{lat: 41.903634, lng: -88.3133890000000, name: 'Station 13'}, 
{lat: 41.67167, lng: -88.548182, name: 'Station 14'}, 
{lat: 41.564786, lng: -88.600822, name: 'Station 15'}, 
{lat: 41.561587, lng: -88.60028599999998, name: 'Station 16'}, 
{lat: 41.560347, lng: -88.597355, name: 'Station 17'}, 
{lat: 41.582568, lng: -88.90418599999998, name: 'Station 18'}, 
{lat: 41.5849, lng: -88.90929499999999, name: 'Station 19'}, 
{lat: 41.584279, lng: -88.91100, name: 'Station 20'}, 
{lat: 41.794906, lng: -88.93928299999999, name: 'Station 21'}, 
{lat: 41.796471, lng: -88.94241299999999, name: 'Station 22'}, 
{lat: 41.849191, lng: -89.0242670000000, name: 'Station 23'}, 
{lat: 41.846972, lng: -89.020418, name: 'Station 24'}, 
{lat: 41.875845, lng: -88.45214199999998, name: 'Station 25'}, 
{lat: 42.030196, lng: -88.271702, name: 'Station 26'}, 
{lat: 42.304403, lng: -89.04231900000002, name: 'Station 27'},
        // ... as many other stations as you need
    ];

    // Zoom and center map automatically by stations (each station will be in visible map area)
    var lngs = stations.map(function(station) { return station.lng; });
    var lats = stations.map(function(station) { return station.lat; });
    map.fitBounds({
        west: Math.min.apply(null, lngs),
        east: Math.max.apply(null, lngs),
        north: Math.min.apply(null, lats),
        south: Math.max.apply(null, lats),
    });

    // Show stations on the map as markers
    for (var i = 0; i < stations.length; i++) {
        new google.maps.Marker({
            position: stations[i],
            map: map,
            title: stations[i].name
        });
    }

    // Divide route to several parts because max stations limit is 25 (23 waypoints + 1 origin + 1 destination)
    for (var i = 0, parts = [], max = 25 - 1; i < stations.length; i = i + max)
        parts.push(stations.slice(i, i + max + 1));

    // Service callback to process service results
    var service_callback = function(response, status) {
        if (status != 'OK') {
            console.log('Directions request failed due to ' + status);
            return;
        }
        var renderer = new google.maps.DirectionsRenderer;
        renderer.setMap(map);
        renderer.setOptions({ suppressMarkers: true, preserveViewport: true });
        renderer.setDirections(response);
    };

    // Send requests to service to get route (for stations count <= 25 only one request will be sent)
    for (var i = 0; i < parts.length; i++) {
        // Waypoints does not include first station (origin) and last station (destination)
        var waypoints = [];
        for (var j = 1; j < parts[i].length - 1; j++)
            waypoints.push({location: parts[i][j], stopover: false});
        // Service options
        var service_options = {
            origin: parts[i][0],
            destination: parts[i][parts[i].length - 1],
            waypoints: waypoints,
            optimizeWaypoints: true,
            travelMode: 'DRIVING'
        };
        // Send request
        service.route(service_options, service_callback);
    }
  }
</script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyABPfm9lb39EOvsKMyrdnwdTJSN8IjqVy0&callback=initMap">
    </script>
  </body>
</html>

最佳答案

在这种情况下，使用 Google 的 API 无法实现全局最小值。我们必须有一个近似值 -

  • 迭代地，将 20-25 个点聚集在一起，并以此为基础生成路线；从每个集群的 20-25 个点中选择一个主点 - 通过比较平均值等，它可以是第一个点/中间的一个点。
  • 使用集群的主点生成另一个 calcRoute。在此基础上，尝试生成集群之间的宽路由和集群之间的路由。

    • 关于javascript - 处理超过 23 个航点的方法 Google map ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46187929/

    24 4 0
    文章推荐： java - 使用 JNLP API 获取 .jnlp 文件内资源下的 JAR
    文章推荐： java - LWJGL 屏幕外 2D 纹理映射
    文章推荐： java - glReadPixels() 无法填充 ByteBuffer
    文章推荐： java jackson json 处理器 - 在 Android 上的 RestTemplate 中使用和自动类型转换
    行者123
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    全站热门文章
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com