javascript - 如何使用 Google Maps API 计算 route 从已知点到最近点的距离-6ren

javascript - 如何使用 Google Maps API 计算 route 从已知点到最近点的距离

转载作者：行者123 更新时间：2023-11-27 23:56:19

我正在开发一个显示多条路线 map 的项目。我需要能够按地址搜索并返回到每条 route 最近点的距离。测量距已知点的距离很容易，但我需要知道从已知点到路线上最近点的距离。

下面的代码绘制了 3 条路线和一个以 50 公里半径为圆心的点。我需要测量从该点到每条路线上最近的点。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta charset="utf-8" />
<title>Waypoints in directions</title>
<!-- Latest compiled and minified CSS -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" />

<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<style>

html, body, #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
}

#map-canvas {
    float:left;
    width:70%;
    height:100%;
}

#panel {
    position: absolute;
    top: 5px;
    left: 50%;
    margin-left: -180px;
    z-index: 5;
    background-color: #fff;
    padding: 5px;
    border: 1px solid #999;
}

#control_panel {
    float:right;
    width:30%;
    text-align:left;
    padding-top:20px;
}

</style>

</head>
<body>

<div id="map-canvas"></div>
<div id="control_panel">

    <div class="container" style="width:auto;">
        <h1>Trips:</h1>


        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Blue Run</h3>
            </div>
            <div class="panel-body">
                <ol>
<li><strong>Autosystems (University)</strong><br />300 University Ave, Plant 1 Belleville, ON K8N 5T7</li><li><strong>Fanuc America</strong><br />3900 West Hamlin Road Rochester Hills, MI 48309</li>                </ol>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Big Run</h3>
            </div>
            <div class="panel-body">
                <ol>
<li><strong>Asyst Technologies</strong><br />5811 - 99th Avenue Kenosha, WI 53144</li><li><strong>Autosystems America Inc</strong><br />46600 Port St Plymouth, MI 48170</li>                </ol>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Slow Run</h3>
            </div>
            <div class="panel-body">
                <ol>
<li><strong>A B Automation</strong><br />2155 North Talbot Road Windsor, ON N9A 6J3</li><li><strong>Autosystems America Inc</strong><br />46600 Port St Plymouth, MI 48170</li><li><strong>Industrial Automation</strong><br />2968 Waterview Rochester Hills, MI 48309</li><li><strong>Arkema Inc.</strong><br />4350 Campground Rd Louisville, KY 40216</li>                </ol>
            </div>
        </div>
    </div>

</div>

<input type="hidden" name="lat" id="lat" value="" />
<input type="hidden" name="lng" id="lng" value="" />

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=<api-key>"></script>
<script type="text/javascript">

// Initialize some variables
var directionsService = new google.maps.DirectionsService();
var num, map, data;
var requestArray = [], renderArray = [];

// A JSON Array containing some people/routes and the destinations/stops
var jsonArray = {
    "Blue Run": ["300 University Ave, Plant 1 Belleville, ON K8N 5T7","3900 West Hamlin Road Rochester Hills, MI 48309"],
    "Big Run": ["5811 - 99th Avenue Kenosha, WI 53144","46600 Port St Plymouth, MI 48170"],
    "Slow Run": ["2155 North Talbot Road Windsor, ON N9A 6J3","46600 Port St Plymouth, MI 48170","2968 Waterview Rochester Hills, MI 48309","4350 Campground Rd Louisville, KY 40216"]
}

// 16 Standard Colours for navigation polylines
var colourArray = ['navy', 'red', 'green', 'grey', 'fuchsia', 'black', 'white', 'lime', 'maroon', 'purple', 'aqua', 'silver', 'olive', 'blue', 'yellow', 'teal'];

// Let's make an array of requests which will become individual polylines on the map.
function generateRequests(){

    requestArray = [];

    for (var route in jsonArray){
        // This now deals with one of the people / routes

        // Somewhere to store the wayoints
        var waypts = [];

        // 'start' and 'finish' will be the routes origin and destination
        var start, finish

        // lastpoint is used to ensure that duplicate waypoints are stripped
        var lastpoint

        data = jsonArray[route]

        limit = data.length
        for (var waypoint = 0; waypoint < limit; waypoint++) {
            if (data[waypoint] === lastpoint){
                // Duplicate of of the last waypoint - don't bother
                continue;
            }

            // Prepare the lastpoint for the next loop
            lastpoint = data[waypoint]

            // Add this to waypoint to the array for making the request
            waypts.push({
                location: data[waypoint],
                stopover: true
            });
        }

        // Grab the first waypoint for the 'start' location
        start = (waypts.shift()).location;
        // Grab the last waypoint for use as a 'finish' location
        finish = waypts.pop();
        if(finish === undefined){
            // Unless there was no finish location for some reason?
            finish = start;
        } else {
            finish = finish.location;
        }

        // Let's create the Google Maps request object
        var request = {
            origin: start,
            destination: finish,
            waypoints: waypts,
            travelMode: google.maps.TravelMode.DRIVING
        };

        // and save it in our requestArray
        requestArray.push({"route": route, "request": request});
    }

    processRequests();
}

function processRequests(){

    // Counter to track request submission and process one at a time;
    var i = 0;

    // Used to submit the request 'i'
    function submitRequest(){
        directionsService.route(requestArray[i].request, directionResults);
    }

    // Used as callback for the above request for current 'i'
    function directionResults(result, status) {
        if (status == google.maps.DirectionsStatus.OK) {

            // Create a unique DirectionsRenderer 'i'
            renderArray[i] = new google.maps.DirectionsRenderer();
            renderArray[i].setMap(map);

            // Some unique options from the colorArray so we can see the routes
            renderArray[i].setOptions({
                preserveViewport: true,
                suppressInfoWindows: true,
                polylineOptions: {
                    strokeWeight: 4,
                    strokeOpacity: 0.8,
                    strokeColor: colourArray[i]
                },
                markerOptions:{
                    icon:{
                        path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
                        scale: 4,
                        strokeColor: colourArray[i]
                    },
                    clickable: true,
                    title: 'Boo yeah!'
                }
            });

            // Use this new renderer with the result
            renderArray[i].setDirections(result);
            // and start the next request
            nextRequest();
        }

    }

    function nextRequest(){
        // Increase the counter
        i++;
        // Make sure we are still waiting for a request
        if(i >= requestArray.length){
            // No more to do
            return;
        }
        // Submit another request
        submitRequest();
    }

    // This request is just to kick start the whole process
    submitRequest();
}

// Called Onload
function init() {

    var address = "320 Elizabeth St Midland, ON L4R 4L6";
    var geo = new google.maps.Geocoder;
    geo.geocode({'address':address},function(results, status){
        if (status == google.maps.GeocoderStatus.OK) {
            var latitude = results[0].geometry.location.lat();
            var longitude = results[0].geometry.location.lng();

            // Some basic map setup (from the API docs) 
            var mapOptions = {
                //center: new google.maps.LatLng(50.677965, -3.768841),
                center: new google.maps.LatLng(latitude, longitude),
                zoom: 10,
                mapTypeControl: true,
                streetViewControl: true,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                travelMode: google.maps.TravelMode.DRIVING,
                //unitSystem: google.maps.UnitSystem.IMPERIAL
                unitSystem: google.maps.UnitSystem.METRIC
            };

            map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

            var circle = {
                strokeColor: '#AA0000',
                strokeOpacity: 0.6,
                strokeWeight: 2,
                fillColor: '#CCCCCC',
                fillOpacity: 0.35,
                map: map,
                radius: 50000,
                center: new google.maps.LatLng(latitude, longitude)
            };

            var pickupSpot = new google.maps.Circle(circle);

            // Start the request making
            generateRequests()
        } else {
            alert("Geocode was not successful for the following reason: " + status);
        }
    });
}

// Get the ball rolling and trigger our init() on 'load'
google.maps.event.addDomListener(window, 'load', init);

</script>

</body>
</html>

我在网上找不到任何可以教授我需要的内容的地方。有人可以帮忙吗？

最佳答案

一种解决方案:

从每条 route 提取折线
处理每条折线，找到最近的点(使用直线，“直线距离”)

// Use this new renderer with the result
renderArray[i].setDirections(result);
// and start the next request
var polyline = getPolyline(result);
var marker = new google.maps.Marker({
    position: getClosestPoint(referencePt, polyline),
    map: map,
    icon: iconArray[i]
});
nextRequest();

proof of concept fiddle

代码片段:

var referencePt = "TBD";

// Initialize some variables
var directionsService = new google.maps.DirectionsService();
var num, map, data;
var requestArray = [],
  renderArray = [];
var markerBounds = new google.maps.LatLngBounds();

// A JSON Array containing some people/routes and the destinations/stops
var jsonArray = {
  "Blue Run": ["300 University Ave, Plant 1 Belleville, ON K8N 5T7", "3900 West Hamlin Road Rochester Hills, MI 48309"],
  "Big Run": ["5811 - 99th Avenue Kenosha, WI 53144", "46600 Port St Plymouth, MI 48170"],
  "Slow Run": ["2155 North Talbot Road Windsor, ON N9A 6J3", "46600 Port St Plymouth, MI 48170", "2968 Waterview Rochester Hills, MI 48309", "4350 Campground Rd Louisville, KY 40216"]
}

// 16 Standard Colours for navigation polylines
var colourArray = ['navy', 'red', 'green', 'grey', 'fuchsia', 'black', 'white', 'lime', 'maroon', 'purple', 'aqua', 'silver', 'olive', 'blue', 'yellow', 'teal'];

var iconArray = [
  "http://maps.google.com/mapfiles/ms/icons/blue.png",
  "http://maps.google.com/mapfiles/ms/icons/red.png",
  "http://maps.google.com/mapfiles/ms/icons/green.png"
];

// Let's make an array of requests which will become individual polylines on the map.
function generateRequests() {

  requestArray = [];

  for (var route in jsonArray) {
    // This now deals with one of the people / routes

    // Somewhere to store the wayoints
    var waypts = [];

    // 'start' and 'finish' will be the routes origin and destination
    var start, finish

    // lastpoint is used to ensure that duplicate waypoints are stripped
    var lastpoint

    data = jsonArray[route]

    limit = data.length
    for (var waypoint = 0; waypoint < limit; waypoint++) {
      if (data[waypoint] === lastpoint) {
        // Duplicate of of the last waypoint - don't bother
        continue;
      }

      // Prepare the lastpoint for the next loop
      lastpoint = data[waypoint]

      // Add this to waypoint to the array for making the request
      waypts.push({
        location: data[waypoint],
        stopover: true
      });
    }

    // Grab the first waypoint for the 'start' location
    start = (waypts.shift()).location;
    // Grab the last waypoint for use as a 'finish' location
    finish = waypts.pop();
    if (finish === undefined) {
      // Unless there was no finish location for some reason?
      finish = start;
    } else {
      finish = finish.location;
    }

    // Let's create the Google Maps request object
    var request = {
      origin: start,
      destination: finish,
      waypoints: waypts,
      travelMode: google.maps.TravelMode.DRIVING
    };

    // and save it in our requestArray
    requestArray.push({
      "route": route,
      "request": request
    });
  }

  processRequests();
}

function processRequests() {

  // Counter to track request submission and process one at a time;
  var i = 0;

  // Used to submit the request 'i'
  function submitRequest() {
    directionsService.route(requestArray[i].request, directionResults);
  }

  // Used as callback for the above request for current 'i'
  function directionResults(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {

      // Create a unique DirectionsRenderer 'i'
      renderArray[i] = new google.maps.DirectionsRenderer();
      renderArray[i].setMap(map);

      // Some unique options from the colorArray so we can see the routes
      renderArray[i].setOptions({
        preserveViewport: true,
        suppressInfoWindows: true,
        polylineOptions: {
          strokeWeight: 4,
          strokeOpacity: 0.8,
          strokeColor: colourArray[i]
        },
        markerOptions: {
          icon: {
            path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
            scale: 4,
            strokeColor: colourArray[i]
          },
          clickable: true,
          title: 'Boo yeah!'
        }
      });

      // Use this new renderer with the result
      renderArray[i].setDirections(result);
      // and start the next request
      var polyline = getPolyline(result);
      var marker = new google.maps.Marker({
        position: getClosestPoint(referencePt, polyline),
        map: map,
        icon: iconArray[i]
      });
      markerBounds.extend(marker.getPosition());
      nextRequest();
    }

  }

  function nextRequest() {
    // Increase the counter
    i++;
    // Make sure we are still waiting for a request
    if (i >= requestArray.length) {
      map.fitBounds(markerBounds);
      // No more to do
      return;
    }
    // Submit another request
    submitRequest();
  }

  // This request is just to kick start the whole process
  submitRequest();
}

function getPolyline(result) {
  var polyline = new google.maps.Polyline({
    path: []
  });
  var path = result.routes[0].overview_path;
  var legs = result.routes[0].legs;
  for (i = 0; i < legs.length; i++) {
    var steps = legs[i].steps;
    for (j = 0; j < steps.length; j++) {
      var nextSegment = steps[j].path;
      for (k = 0; k < nextSegment.length; k++) {
        polyline.getPath().push(nextSegment[k]);
      }
    }
  }
  return polyline;
}

function getClosestPoint(point, polyline) {
  var closestDistance = Number.MAX_VALUE;
  var closestPt;
  for (var i = 0; i < polyline.getPath().getLength(); i++) {
    var distance = google.maps.geometry.spherical.computeDistanceBetween(point, polyline.getPath().getAt(i));
    if (distance < closestDistance) {
      closestDistance = distance;
      closestPt = polyline.getPath().getAt(i);
    }
  }
  return closestPt;
}

// Called Onload
function init() {

  var address = "320 Elizabeth St Midland, ON L4R 4L6";
  var geo = new google.maps.Geocoder;
  geo.geocode({
    'address': address
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      var latitude = results[0].geometry.location.lat();
      var longitude = results[0].geometry.location.lng();

      // Some basic map setup (from the API docs) 
      var mapOptions = {
        //center: new google.maps.LatLng(50.677965, -3.768841),
        center: new google.maps.LatLng(latitude, longitude),
        zoom: 10,
        mapTypeControl: true,
        streetViewControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        travelMode: google.maps.TravelMode.DRIVING,
        //unitSystem: google.maps.UnitSystem.IMPERIAL
        unitSystem: google.maps.UnitSystem.METRIC
      };

      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

      var circle = {
        strokeColor: '#AA0000',
        strokeOpacity: 0.6,
        strokeWeight: 2,
        fillColor: '#CCCCCC',
        fillOpacity: 0.35,
        map: map,
        radius: 50000,
        center: new google.maps.LatLng(latitude, longitude)
      };
      referencePt = mapOptions.center;

      var pickupSpot = new google.maps.Circle(circle);

      // Start the request making
      generateRequests()
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
}

// Get the ball rolling and trigger our init() on 'load'
google.maps.event.addDomListener(window, 'load', init);

html,
body,
#map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
}
#map-canvas {
  float: left;
  width: 70%;
  height: 100%;
}
#panel {
  position: absolute;
  top: 5px;
  left: 50%;
  margin-left: -180px;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
}
#control_panel {
  float: right;
  width: 30%;
  text-align: left;
  padding-top: 20px;
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id="map-canvas"></div>
<div id="control_panel">
  <div class="container" style="width:auto;">
    <h1>Trips:</h1>

    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">Blue Run</h3>

      </div>
      <div class="panel-body">
        <ol>
          <li><strong>Autosystems (University)</strong>
            <br />300 University Ave, Plant 1 Belleville, ON K8N 5T7</li>
          <li><strong>Fanuc America</strong>
            <br />3900 West Hamlin Road Rochester Hills, MI 48309</li>
        </ol>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">Big Run</h3>

      </div>
      <div class="panel-body">
        <ol>
          <li><strong>Asyst Technologies</strong>
            <br />5811 - 99th Avenue Kenosha, WI 53144</li>
          <li><strong>Autosystems America Inc</strong>
            <br />46600 Port St Plymouth, MI 48170</li>
        </ol>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">Slow Run</h3>

      </div>
      <div class="panel-body">
        <ol>
          <li><strong>A B Automation</strong>
            <br />2155 North Talbot Road Windsor, ON N9A 6J3</li>
          <li><strong>Autosystems America Inc</strong>
            <br />46600 Port St Plymouth, MI 48170</li>
          <li><strong>Industrial Automation</strong>
            <br />2968 Waterview Rochester Hills, MI 48309</li>
          <li><strong>Arkema Inc.</strong>
            <br />4350 Campground Rd Louisville, KY 40216</li>
        </ol>
      </div>
    </div>
  </div>
</div>
<input type="hidden" name="lat" id="lat" value="" />
<input type="hidden" name="lng" id="lng" value="" />

关于javascript - 如何使用 Google Maps API 计算 route 从已知点到最近点的距离，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32278427/

文章推荐： c++ - 我无法让 SHGetFileInfo 返回图标位置

文章推荐： javascript - Coffeescript HTML5 音频暂停所有其他音频元素

文章推荐： javascript - 部分 html Controller Angular

c++ - 如何遍历 vector 图的 map map map map map map map vector
我正在尝试从一个 map 的 map 的 map 的 map 的 map 的 map 的 map 的 map 的 map 的 map 的 map 的 map 的 map 的 map 的 map 的 m
function - map map vs map.map
我是 Haskell 的新手，我认为函数 map map和 map.map在 Haskell 中是一样的。我的终端给了我两种不同的类型， (map.map) :: (a -> b) -> [[a]
java - Map of maps - 如何将内部 map 保留为 map ？
我的目标是创建一个 map 的 map ，这样我就可以通过它的键检索外部 map 的信息，然后通过它们的键访问它的“内部” map 。但是，当我得到每个内部映射时，我最初创建的映射变成了一个对象，我
java - map 的 map 根据内部 map 值获取外部 map
如何使用 Java8 编写以下代码？ for (Entry> entry : data.entrySet()) { Map value = entry.getValue(); if (valu
map - 如何为 map 叠加层准确制作 map
我有覆盖整个南非的图片。它们为Tiff格式，并已将坐标嵌入其中。我正在尝试拍摄这些图像（大约20张图像），并将它们用作我的iPhone应用程序中的地图叠加层。我的问题在于（准确地）将地图切成图块。我
c++ - 如何从一个 map 键列表中减去另一个 map 键列表并获得新 map ( map A - mab B = map C)
所以我有 2 std::map s >一个是“旧的”，一个是“新的”，我想知道哪些文件被删除了，这样就能够遍历差异并对 shared_ptr 做一些事情。这样的事情可能吗？如何做到？最佳答案虽然
google-maps - 将 google.maps.Map 转换为静态 map 链接
是否可以将当前查看的 google.maps.Map 转换为静态图像链接，以便我可以获取图像并将其嵌入到 PDF 中？我在 map 上添加了一些带有自定义图标的标记，所以我不确定这是否真的可行。如
java - 如何将 map 的 map 列表合并为 map 的 map ？
你能帮我吗 Java Streams ？从标题可以看出我需要合并List>>进入Map> . 列表表示为List>>看起来像: [ { "USER_1":{
java - Collection.shuffle 不适用于 Map 键和 Map 值。我有一张 map 中的 map 。我想打乱最里面的 map
对于 idAndTags 的第二个条目，内部映射被打乱，但第一个条目则不然第一次接近! for (Map.Entry> entryOne : idAndTags.entrySet()) {
map - 如何在定义整个 map 之前引用 map 中的变量？
我将从我的代码开始，因为它应该更容易理解我想要做什么: @function get-color($color, $lightness) { @return map-get(map-get($col
google-maps - Google map 窗口仅显示部分 map
我过去曾在许多网站上使用过 Google map ，但遇到了以前从未遇到过的问题。 map 窗口正在显示，但它只显示左上角的 map 片段，以及之后的任何内容(即使我在周围导航时)，右侧也不会加载任何
google-maps - 中国 map - 卫星 map 和默认街道 map 哪个是正确的？这是否意味着地理编码结果是错误的？
众所周知，这些 map ，无论是常规街道 map 还是卫星 map ，在中国的特定地区都无法正确排列。那么哪个 map 排列正确，是卫星 map 还是默认街道 map ？一些网站表明卫星 map 是正
maps - 如何在此处 map 中拖动 map 后获取边界
在拖尾事件之后，我面临着获取此处 map 中的 map 边界的问题。我需要新的经纬度来在新更改的视口(viewport)中获取一些项目/点。我只是想在拖动结束时获得谷歌地图map.getBounds(
bing-maps - Bing map - 英国邮政编码到 map
我想做的是通过 ajax API 显示以英国邮政编码为中心的小型 bing 生成 map 。我相信这是可能的；我在 Bing map 文档中找不到如何将英国邮政编码转换为可以插入 map Ajax 控
java - 如何将列表转换为 map 的 map Map>
我有一个 List我想转换成的 e Map>其中外部字符串应为“Name”，内部字符串应为“Domain”。 Name Id Domain e(0) - Emp1, 1, Insuran
C++ : filling map of maps via map instance allocation from a vector of maps
我的第 2 部分:https://stackoverflow.com/questions/21780627/c-map-of-maps-typedef-doubts-queries 然后我继续创建 I
带有总和的 Map of Map 的 Java8 Map
是否可以在 1 行中使用 Java8 编写以下所有 null 和空字符串检查？ Map> data = new HashMap<>(holdings.rowMap()); Set>> entrySet
java - 重构 Java Map of Map of Map
我正在审查一个项目的旧代码，并使用 Map 的 Map 的 Map 获得了如下数据结构(3 层 map ): // data structure Map>>> tagTree
java - 如何正确地延迟初始化 Map of Map 的 Map？
这可能是一种不好的做法，但我还没有找到更好的解决方案来解决我的问题。所以我有这张 map // Map>> private Map>> properties; 我想初始化它，这样我就不会得到 Null
Java 为什么 Map of Map (ex : Map>) 不可序列化
我们在 JDK 1.7 中使用 HashMap，我在使用 SonarQube 进行代码审查时遇到了一些问题。请考虑以下示例: public class SerializationTest imple

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何使用 Google Maps API 计算 route 从已知点到最近点的距离