JavaScript Google map 折线 : issue in connecting all given GPS locations-6ren

JavaScript Google map 折线 : issue in connecting all given GPS locations

转载作者：行者123 更新时间：2023-12-03 11:10:40

我在 html 页面中使用 Javascript 来显示带有标记的 GPS 位置，所有这些 GPS 位置都使用驾驶模式通过折线连接。所有标记都显示在输出中，但折线无法正常工作。

问题是，只有少数位置通过折线连接，并且其中很少有位置在没有连接的情况下被跳过。任何人都可以指出问题出在哪里？

html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

     function Call2function(){

        var msg ="41.077354,-81.511337:41.080647,-81.516579:41.077435,-81.521561:41.075253,-81.521492:41.074604,-81.520309:41.07415,-81.516335:41.073158,-81.514931:41.070534,-81.516563:41.066677,-81.516502:41.063942,-81.516502:41.06514,-81.513458:41.067383,-81.513412:41.069546,-81.513397:41.070778,-81.513382:41.072514,-81.512619:41.071106,-81.507614:41.073326,-81.506195:41.075886,-81.506058:41.077274,-81.507652:41.077354,-81.511337";
        var input_msg=msg.split(":");
        var mylatlongg = new Array();
        latlongg =input_msg[0].split(",");

        var mapOptions = {
            center: new google.maps.LatLng(mylatlongg[0],mylatlongg[1]),
            zoom: 12,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
        var infoWindow = new google.maps.InfoWindow();
        var lat_lng = new Array();
        var latlngbounds = new google.maps.LatLngBounds();
        for (i = 0; i<input_msg.length; i++) {
            var data = input_msg[i];
            var laaty =  input_msg[i].split(",")
            var myLatlng = new google.maps.LatLng(laaty[0], laaty[1]);
            lat_lng.push(myLatlng);
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: 'location'
            });
            latlngbounds.extend(marker.position);
        }
        map.setCenter(latlngbounds.getCenter());
        map.fitBounds(latlngbounds);

        //***********ROUTING****************//

        //Intialize the Path Array
        var path = new google.maps.MVCArray();

        //Intialize the Direction Service
        var service = new google.maps.DirectionsService();

        //Set the Path Stroke Color
        var poly = new google.maps.Polyline({ map: map, strokeColor: '#4986E7' });

        //Loop and Draw Path Route between the Points on MAP
        for (var i = 0; i < lat_lng.length; i++) {
            if ((i + 1) < lat_lng.length) {
                var src = lat_lng[i];
                var des = lat_lng[i + 1];
                // path.push(src);
                poly.setPath(path);
                service.route({
                    origin: src,
                    destination: des,
                    travelMode: google.maps.DirectionsTravelMode.DRIVING
                }, function (result, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
                        for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
                            path.push(result.routes[0].overview_path[i]);
                        }
                    }
                });
            }


        }

    }
    google.maps.event.addDomListener(window, 'load', Call2function);

</script>
<div id="dvMap" style="width: 600px; height: 600px">
</div>
</body>
</html>

最佳答案

路线服务受配额和费率限制。您没有检查服务返回的状态 (OVER_QUERY_LIMIT)

您可能想要使用航点(免费 API 的单个路线请求最多支持 8 个)，您目前只有 20 个航点，您应该能够通过 3 个请求完成路线。

请参阅此相关问题中的示例:Google Maps API to get bus route

fiddle with error checking

service.route({
   origin: src,
   destination: des,
   travelMode: google.maps.DirectionsTravelMode.DRIVING
  }, function (result, status) {
   if (status == google.maps.DirectionsStatus.OK) {
     for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
       path.push(result.routes[0].overview_path[i]);
     }
   } else {
     document.getElementById('info').innerHTML += status + "<br>";
   }
});

working fiddle (基于 this answer 中的示例)

代码片段:

jQuery(function() {
  var msg = "41.077354,-81.511337:41.080647,-81.516579:41.077435,-81.521561:41.075253,-81.521492:41.074604,-81.520309:41.07415,-81.516335:41.073158,-81.514931:41.070534,-81.516563:41.066677,-81.516502:41.063942,-81.516502:41.06514,-81.513458:41.067383,-81.513412:41.069546,-81.513397:41.070778,-81.513382:41.072514,-81.512619:41.071106,-81.507614:41.073326,-81.506195:41.075886,-81.506058:41.077274,-81.507652:41.077354,-81.511337";
  var input_msg = msg.split(":");

  var map = new window.google.maps.Map(document.getElementById("dvMap"));

  // new up complex objects before passing them around
  var directionsDisplay = new window.google.maps.DirectionsRenderer({
    suppressMarkers: true
  });
  var directionsService = new window.google.maps.DirectionsService();

  Tour_startUp(input_msg);

  window.tour.loadMap(map, directionsDisplay);
  window.tour.fitBounds(map);

  if (input_msg.length > 1)
    window.tour.calcRoute(directionsService, directionsDisplay);
});

function Tour_startUp(stops) {
  if (!window.tour) window.tour = {
    updateStops: function(newStops) {
      stops = newStops;
    },
    // map: google map object
    // directionsDisplay: google directionsDisplay object (comes in empty)
    loadMap: function(map, directionsDisplay) {
      var myOptions = {
        zoom: 13,
        center: new window.google.maps.LatLng(51.507937, -0.076188), // default to London
        mapTypeId: window.google.maps.MapTypeId.ROADMAP
      };
      map.setOptions(myOptions);
      directionsDisplay.setMap(map);
    },
    fitBounds: function(map) {
      var bounds = new window.google.maps.LatLngBounds();

      // extend bounds for each record
      jQuery.each(stops, function(key, val) {
        var latlng = val.split(",");
        var myLatlng = new window.google.maps.LatLng(latlng[0], latlng[1]);
        bounds.extend(myLatlng);
      });
      map.fitBounds(bounds);
    },
    calcRoute: function(directionsService, directionsDisplay) {
      var batches = [];
      var itemsPerBatch = 10; // google API max = 10 - 1 start, 1 stop, and 8 waypoints
      var itemsCounter = 0;
      var wayptsExist = stops.length > 0;

      while (wayptsExist) {
        var subBatch = [];
        var subitemsCounter = 0;

        for (var j = itemsCounter; j < stops.length; j++) {
          subitemsCounter++;
          var latlng = stops[j].split(",");
          subBatch.push({
            location: new window.google.maps.LatLng(latlng[0], latlng[1]),
            stopover: true
          });
          if (subitemsCounter == itemsPerBatch)
            break;
        }

        itemsCounter += subitemsCounter;
        batches.push(subBatch);
        wayptsExist = itemsCounter < stops.length;
        // If it runs again there are still points. Minus 1 before continuing to
        // start up with end of previous tour leg
        itemsCounter--;
      }

      // now we should have a 2 dimensional array with a list of a list of waypoints
      var combinedResults;
      var unsortedResults = [{}]; // to hold the counter and the results themselves as they come back, to later sort
      var directionsResultsReturned = 0;

      for (var k = 0; k < batches.length; k++) {
        var lastIndex = batches[k].length - 1;
        var start = batches[k][0].location;
        var end = batches[k][lastIndex].location;

        // trim first and last entry from array
        var waypts = [];
        waypts = batches[k];
        waypts.splice(0, 1);
        waypts.splice(waypts.length - 1, 1);

        var request = {
          origin: start,
          destination: end,
          waypoints: waypts,
          travelMode: window.google.maps.TravelMode.WALKING
        };
        (function(kk) {
          directionsService.route(request, function(result, status) {
            if (status == window.google.maps.DirectionsStatus.OK) {

              var unsortedResult = {
                order: kk,
                result: result
              };
              unsortedResults.push(unsortedResult);

              directionsResultsReturned++;

              if (directionsResultsReturned == batches.length) // we've received all the results. put to map
              {
                // sort the returned values into their correct order
                unsortedResults.sort(function(a, b) {
                  return parseFloat(a.order) - parseFloat(b.order);
                });
                var count = 0;
                for (var key in unsortedResults) {
                  if (unsortedResults[key].result != null) {
                    if (unsortedResults.hasOwnProperty(key)) {
                      if (count == 0) // first results. new up the combinedResults object
                        combinedResults = unsortedResults[key].result;
                      else {
                        // only building up legs, overview_path, and bounds in my consolidated object. This is not a complete
                        // directionResults object, but enough to draw a path on the map, which is all I need
                        combinedResults.routes[0].legs = combinedResults.routes[0].legs.concat(unsortedResults[key].result.routes[0].legs);
                        combinedResults.routes[0].overview_path = combinedResults.routes[0].overview_path.concat(unsortedResults[key].result.routes[0].overview_path);

                        combinedResults.routes[0].bounds = combinedResults.routes[0].bounds.extend(unsortedResults[key].result.routes[0].bounds.getNorthEast());
                        combinedResults.routes[0].bounds = combinedResults.routes[0].bounds.extend(unsortedResults[key].result.routes[0].bounds.getSouthWest());
                      }
                      count++;
                    }
                  }
                }
                directionsDisplay.setDirections(combinedResults);
                var legs = combinedResults.routes[0].legs;
                // alert(legs.length);
                for (var i = 0; i < legs.length; i++) {
                  var markerletter = "A".charCodeAt(0);
                  markerletter += i;
                  markerletter = String.fromCharCode(markerletter);
                  createMarker(directionsDisplay.getMap(), legs[i].start_location, "marker" + i, "some text for marker " + i + "<br>" + legs[i].start_address, markerletter);
                }
                var i = legs.length;
                var markerletter = "A".charCodeAt(0);
                markerletter += i;
                markerletter = String.fromCharCode(markerletter);
                createMarker(directionsDisplay.getMap(), legs[legs.length - 1].end_location, "marker" + i, "some text for the " + i + "marker<br>" + legs[legs.length - 1].end_address, markerletter);
              }
            }
          });
        })(k);
      }
    }
  };
}
var infowindow = new google.maps.InfoWindow({
  size: new google.maps.Size(150, 50)
});

var icons = new Array();
icons["red"] = new google.maps.MarkerImage("mapIcons/marker_red.png",
  // This marker is 20 pixels wide by 34 pixels tall.
  new google.maps.Size(20, 34),
  // The origin for this image is 0,0.
  new google.maps.Point(0, 0),
  // The anchor for this image is at 9,34.
  new google.maps.Point(9, 34));



function getMarkerImage(iconStr) {
    if ((typeof(iconStr) == "undefined") || (iconStr == null)) {
      iconStr = "red";
    }
    if (!icons[iconStr]) {
      icons[iconStr] = new google.maps.MarkerImage("http://www.google.com/mapfiles/marker" + iconStr + ".png",
        // This marker is 20 pixels wide by 34 pixels tall.
        new google.maps.Size(20, 34),
        // The origin for this image is 0,0.
        new google.maps.Point(0, 0),
        // The anchor for this image is at 6,20.
        new google.maps.Point(9, 34));
    }
    return icons[iconStr];

  }
  // Marker sizes are expressed as a Size of X,Y
  // where the origin of the image (0,0) is located
  // in the top left of the image.

// Origins, anchor positions and coordinates of the marker
// increase in the X direction to the right and in
// the Y direction down.

var iconImage = new google.maps.MarkerImage('mapIcons/marker_red.png',
  // This marker is 20 pixels wide by 34 pixels tall.
  new google.maps.Size(20, 34),
  // The origin for this image is 0,0.
  new google.maps.Point(0, 0),
  // The anchor for this image is at 9,34.
  new google.maps.Point(9, 34));
var iconShadow = new google.maps.MarkerImage('http://www.google.com/mapfiles/shadow50.png',
  // The shadow image is larger in the horizontal dimension
  // while the position and offset are the same as for the main image.
  new google.maps.Size(37, 34),
  new google.maps.Point(0, 0),
  new google.maps.Point(9, 34));
// Shapes define the clickable region of the icon.
// The type defines an HTML &lt;area&gt; element 'poly' which
// traces out a polygon as a series of X,Y points. The final
// coordinate closes the poly by connecting to the first
// coordinate.
var iconShape = {
  coord: [9, 0, 6, 1, 4, 2, 2, 4, 0, 8, 0, 12, 1, 14, 2, 16, 5, 19, 7, 23, 8, 26, 9, 30, 9, 34, 11, 34, 11, 30, 12, 26, 13, 24, 14, 21, 16, 18, 18, 16, 20, 12, 20, 8, 18, 4, 16, 2, 15, 1, 13, 0],
  type: 'poly'
};


function createMarker(map, latlng, label, html, color) {
  // alert("createMarker("+latlng+","+label+","+html+","+color+")");
  var contentString = '<b>' + label + '</b><br>' + html;
  var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    shadow: iconShadow,
    icon: getMarkerImage(color),
    shape: iconShape,
    title: label,
    zIndex: Math.round(latlng.lat() * -100000) << 5
  });
  marker.myname = label;

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(contentString);
    infowindow.open(map, marker);
  });
  return marker;
}


function Call2function() {

    var msg = "41.077354,-81.511337:41.080647,-81.516579:41.077435,-81.521561:41.075253,-81.521492:41.074604,-81.520309:41.07415,-81.516335:41.073158,-81.514931:41.070534,-81.516563:41.066677,-81.516502:41.063942,-81.516502:41.06514,-81.513458:41.067383,-81.513412:41.069546,-81.513397:41.070778,-81.513382:41.072514,-81.512619:41.071106,-81.507614:41.073326,-81.506195:41.075886,-81.506058:41.077274,-81.507652:41.077354,-81.511337";
    var input_msg = msg.split(":");
    var mylatlongg = new Array();
    latlongg = input_msg[0].split(",");

    var mapOptions = {
      center: new google.maps.LatLng(mylatlongg[0], mylatlongg[1]),
      zoom: 12,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
    var infoWindow = new google.maps.InfoWindow();
    var lat_lng = new Array();
    var latlngbounds = new google.maps.LatLngBounds();
    document.getElementById('info').innerHTML = "total points: " + input_msg.length + "<br>";
    for (i = 0; i < input_msg.length; i++) {
      var data = input_msg[i];
      var laaty = input_msg[i].split(",")
      var myLatlng = new google.maps.LatLng(laaty[0], laaty[1]);
      lat_lng.push(myLatlng);
      var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: 'location'
      });
      latlngbounds.extend(marker.position);
    }
    map.setCenter(latlngbounds.getCenter());
    map.fitBounds(latlngbounds);

    //***********ROUTING****************//

    //Intialize the Path Array
    var path = new google.maps.MVCArray();

    //Intialize the Direction Service
    var service = new google.maps.DirectionsService();

    //Set the Path Stroke Color
    var poly = new google.maps.Polyline({
      map: map,
      strokeColor: '#4986E7'
    });

    //Loop and Draw Path Route between the Points on MAP
    for (var i = 0; i < lat_lng.length; i++) {
      if ((i + 1) < lat_lng.length) {
        var src = lat_lng[i];
        var des = lat_lng[i + 1];
        // path.push(src);
        poly.setPath(path);
        service.route({
          origin: src,
          destination: des,
          travelMode: google.maps.DirectionsTravelMode.DRIVING
        }, function(result, status) {
          if (status == google.maps.DirectionsStatus.OK) {
            for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
              path.push(result.routes[0].overview_path[i]);
            }
          } else {
            document.getElementById('info').innerHTML += status + "<br>";
          }
        });
      }
    }
  }
  // google.maps.event.addDomListener(window, 'load', Call2function);

html,
body,
#map_canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="dvMap" style="width: 600px; height: 600px"></div>
<div id="info"></div>

关于JavaScript Google map 折线 : issue in connecting all given GPS locations，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27609872/

文章推荐： javascript - 如何为多个元素设置onclick函数？

文章推荐： javascript - Angular JS 意外标记

google-apps-script - 使用 Google 应用程序脚本刷新从 Google 表格粘贴到 Google 幻灯片中的表格
这里的这个问题对 updating Google Sheets charts linked to Google slides 有一个简洁的解决方案. function onOpen() { var
google-apps-script - 用于将 Google 表单添加到 Google 类作业的 Google 脚本
我正在尝试将 Google 表单添加到 Google 类作业中，但似乎不可能。首先，它在这里 ( https://developers.google.com/classroom/reference/
google-visualization - Google 日期时间格式化程序不适用于 Google 折线图
出于某种原因，无论我做什么以及我如何尝试，这个日期格式化程序都不起作用。工具提示仍然显示错误的格式。你可以试试代码here . 在代码中我必须注释掉 formatter.format(dataTabl
google-analytics - Google Analytics - 是否必须从托管 Google Analytics 帐户的 Google 配置文件创建服务帐户？
我目前正在使用访问 token 和刷新 token 从 Google Analytics Reporting API (v4) 中提取数据。当我致力于自动从 Google Analytics 中提取数
google-sheets - Google 电子表格中 Google 驱动器中的引用文件
我已在 Google 云端硬盘中创建了一个文件夹，例如测试一下，放入3个文件 a.jpg, b.jpg, c.jpg 我希望在同一帐户下的 Google 电子表格中访问文件，例如生成图像文件的链接，可
google-apps-script - 在 Google 网站中嵌入 Google 电子表格时，Google Apps 脚本可帮助解决错误？
电子表格 A 是欢迎新移民来到我们小镇的团队的主数据源。它里面有大量非常敏感的数据，不能公开，哪怕是一点点。 (我们谈论的是 child 的姓名和出生日期以及他们在哪里上学……保证电子表格 A 的安全
google-apps-script - 使用 Google Apps 脚本从 Google 表格数据表复制到 Google 文档表
有没有办法在 Google 文档中编写 Google Apps 脚本以从 Google 表格中检索仅限于非空白行的范围并将这些行显示为表格？我正在寻找一个脚本，用于使用 Google Apps 脚本
google-apps-script - 使用 Google Apps 脚本从 Google 表格数据表复制到 Google 文档表
有没有办法在 Google 文档中编写 Google Apps 脚本以从 Google 表格中检索仅限于非空白行的范围并将这些行显示为表格？我正在寻找一个脚本，用于使用 Google Apps 脚本
google-apps-script - 使用 Google Apps 脚本从 Google Firebase 写入 Google Sheets
尝试检索存储在 google firebase 中名为条目的节点下的表单条目，并使用谷歌工作表中的脚本编辑器附加到谷歌工作表。我已将 FirebaseApp 库添加到谷歌表脚本编辑器。然后我的代码看
google-oauth - Google oauth - 限制登录到特定的 google 组
是否可以将我的 Web 应用程序的登录限制为仅限 google 组中的帐户？我不希望每个人都可以使用他们的私有(private) gmail 登录，而只能使用我的 google 组中的用户。最佳答
google-oauth - 带有 Google 自定义搜索功能的 Google 附加链接搜索框
我们想使用 Google 自定义搜索实现 Google 附加链接搜索框。在谷歌 documentation , 我发现我们需要包含以下代码来启用附加链接搜索框 { "@context"
google-trends - 我可以将 Google 趋势图添加到 Google 数据洞察吗？
我想将特定搜索词的 Google 趋势图表添加到我的 Google Data Studio 报告中，但趋势不是数据源列表中的选项。我也找不到嵌入 JavaScript 的选项。是否可以将趋势图表添加到
google-drive-api - 将文件从 Google Drive 复制到 Google 内的 Google Cloud Storage
是否可以将文件从 Google Drive 复制到 Google Cloud Storage？我想它会非常快，因为两者都在类似的存储系统上。我还没有看到有关无缝执行此操作的任何方法的任何信息，而无需
google-analytics - Google Universal Analytics Google-自定义维度
之间有什么区别 ga('send', 'pageview', { 'dimension1': 'data goes here' }); 和 ga('set', 'dimension1', 'da
google-analytics - Google Universal Analytics Google-浏览量
我正在尝试记录每个博客站点作者的点击率。 ga('send', 'pageview'); (in the header with the ga code to track each page) ga(
google-analytics - 自定义变量值未从 Google 跟踪代码管理器传递到 Google Analytics
我设置了 Google Tag Manager 和 2 个数据层变量:一个用于跟踪用户 ID，传递给 Google Analytics 以同步用户 session ，另一个用于跟踪访问者类型。在使用
google-search - Google for Jobs 显示的工作位置不正确(Google 使用的是我们公司的总部)
我在我们的网站上遇到多个职位发布的问题。我们在加拿大多个地点提供工作机会。所有职位页面都包含一个“LD+JSON ”职位发布的结构化数据，基于 Google 的职位发布文档: https://dev
google-analytics - 无需 Google 帐户即可访问 Google Analytics
公司未使用 Google 套件，使用个人(消费者)帐户(甚至是 Google 帐户)违反公司政策。需要访问 Google Analytics - 没有 Google 帐户是否可能？谢谢最佳答案
google-analytics - Google Play 应用页面的 Google Analytics
我想分析人们使用哪些搜索关键字在 Play 商店中找到我的应用。那可能吗？我怎么能这样做？最佳答案自 2013 年 10 月起，您可以关联您的 Google Analytics(分析)和 Goo
google-api - 是否有用于访问 Google Now 或 Google Keep 中设置的提醒的公共(public) Google API？
Google Now 和 Google Keep 中基于时间和位置的提醒与 Google Calendar 事件提醒不同。是否有公共(public) API 可以访问 Now 和 Keep 中的这些事

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

JavaScript Google map 折线 : issue in connecting all given GPS locations