个人中心
gpt4 book ai didi

javascript - Google map 航点超过 8 个问题

转载 作者：行者123 更新时间：2023-11-28 19:27:10 42 4
gpt4 key购买 nike

网上有很多示例/代码可用于使用多个路径点创建 Google map 。我通过排除所有标记、单击按钮等创建了可用的类似版本的代码。

我正在使用谷歌地图V3航点来创建多个目的地之间的路线。由于我们不能使用超过8个航点，因此我正在使用批处理处理多个航点。在下面的代码中有19个gps位置，其中10个gps位置是一批加工，另一批加工 9 个。调用 drawRouteMap 函数来绘制 10 个(或更少)GPS 位置集的路线。

问题是 Google map 在每个函数调用中都被覆盖。Google map 的输出显示最新处理的值。任何人都可以建议我哪里出错了

<!DOCTYPE html>
<html>
  <head>
      <title></title>
</head>
<body>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">


var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function calcRoute() {

  map = new google.maps.Map(document.getElementById('dvMap'), mapOptions);
  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";
  var input_msg=msg.split(":");
  var locations = new Array();      

  for (var i = 0; i < input_msg.length; i++) {
    var tmp_lat_lng =input_msg[i].split(",");
    locations.push(new google.maps.LatLng(tmp_lat_lng[0], tmp_lat_lng[1])); 
  }

  directionsDisplay = new google.maps.DirectionsRenderer();

  var mapOptions = {
  center: locations[0],
  zoom: 12,
  mapTypeId: google.maps.MapTypeId.ROADMAP  
  }
  directionsDisplay.setMap(map);

  var i =locations.length;
  var index =0;

  while(i !=0 ){

        if(i<3){
          var tmp_locations =new Array();
          for (var j=index;j<locations.length;j++) {
            tmp_locations.push(locations[index]);
          }
        drawRouteMap(tmp_locations); 
        i=0; 
        index=locations.length;  
       }

        if( i>= 3 && i<=10) {
           alert("before :fun < 10: i value "+i+" index value"+index);
           var tmp_locations =new Array();
           for (var j=index;j<locations.length;j++) {
             tmp_locations.push(locations[j]);
           }
        drawRouteMap(tmp_locations);
        i=0;
        index=locations.length;
        alert("after fun < 10: i value "+i+" index value"+index);
        }

        if(i > 10) {
        alert("before :fun > 10: i value "+i+" index value"+index);
        var tmp_locations =new Array();
        for (var j=index;j<index+10;j++) {
         tmp_locations.push(locations[j]);
        }
        drawRouteMap(tmp_locations);
        i=i-10; 
        index =index+10;
        alert("after fun > 10: i value "+i+" index value"+index);
        }
   }
}


 function drawRouteMap(locations){

  var start,end;
  var waypts = [];

  for(var k =0;k<locations.length;k++){
  if (k>=1 && k<=locations.length-2) {
      waypts.push({
          location:locations[k],
          stopover:true});
  }
  if(k==0) 
    start=locations[k];

  if(k==locations.length-1) 
     end=locations[k];

 }
   var request = {
      origin: start,
      destination: end,
      waypoints: waypts,
      optimizeWaypoints: true,
      travelMode: google.maps.TravelMode.DRIVING
  };
      console.log(request);
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
            console.log(status);
      directionsDisplay.setDirections(response);
    }
  });


 }

google.maps.event.addDomListener(window, 'load', calcRoute);
    </script>
    <div id="dvMap" style="width: 500px; height: 500px">
    </div>
  </body>
</html>

最佳答案

您需要为要在 map 上显示的每条路线创建一个单独的 DirectionsRenderer 实例。

var directionsDisplay = [];
var directionsService = [];
var map = null;
var bounds = null;

 function drawRouteMap(locations){

  var start,end;
  var waypts = [];

  for(var k =0;k<locations.length;k++){
  if (k>=1 && k<=locations.length-2) {
      waypts.push({
          location:locations[k],
          stopover:true});
  }
  if(k==0) 
    start=locations[k];

  if(k==locations.length-1) 
     end=locations[k];

 }
   var request = {
      origin: start,
      destination: end,
      waypoints: waypts,
      optimizeWaypoints: true,
      travelMode: google.maps.TravelMode.DRIVING
  };
      console.log(request);

  directionsService.push(new google.maps.DirectionsService());
  var instance = directionsService.length-1;
     directionsDisplay.push(new google.maps.DirectionsRenderer({preservViewport:true}));
  directionsDisplay[instance].setMap(map);
  directionsService[instance].route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      console.log(status);
      if (!bounds) bounds = response.bounds;
      else bounds.union(response.bounds);
      directionsDisplay[instance].setDirections(response);
      if (instance > 0) map.fitBounds(bounds);
    }
  });
 }

working fiddle (but you probably want to connect the two routes)

working fiddle with common point

工作代码片段:

var directionsDisplay = [];
var directionsService = [];
var map = null;

function calcRoute() {
  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";
  var input_msg = msg.split(":");
  var locations = new Array();

    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < input_msg.length; i++) {
        var tmp_lat_lng = input_msg[i].split(",");
        locations.push(new google.maps.LatLng(tmp_lat_lng[0], tmp_lat_lng[1]));
        bounds.extend(locations[locations.length-1]);
    }

    var mapOptions = {
        // center: locations[0],
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('dvMap'), mapOptions);
    map.fitBounds(bounds);
    google.maps.event.addDomListener(window,'resize',function() {
      google.maps.event.trigger(map,'resize');
      map.fitBounds(bounds);
    });

  var i = locations.length;
  var index = 0;

  while (i != 0) {

    if (i < 3) {
      var tmp_locations = new Array();
      for (var j = index; j < locations.length; j++) {
        tmp_locations.push(locations[index]);
      }
      drawRouteMap(tmp_locations);
      i = 0;
      index = locations.length;
    }

    if (i >= 3 && i <= 10) {
      console.log("before :fun < 10: i value " + i + " index value" + index);
      var tmp_locations = new Array();
      for (var j = index; j < locations.length; j++) {
        tmp_locations.push(locations[j]);
      }
      drawRouteMap(tmp_locations);
      i = 0;
      index = locations.length;
      console.log("after fun < 10: i value " + i + " index value" + index);
    }

    if (i >= 10) {
      console.log("before :fun > 10: i value " + i + " index value" + index);
      var tmp_locations = new Array();
      for (var j = index; j < index + 10; j++) {
        tmp_locations.push(locations[j]);
      }
      drawRouteMap(tmp_locations);
      i = i - 9;
      index = index + 9;
      console.log("after fun > 10: i value " + i + " index value" + index);
    }
  }
}


function drawRouteMap(locations) {

  var start, end;
  var waypts = [];

  for (var k = 0; k < locations.length; k++) {
    if (k >= 1 && k <= locations.length - 2) {
      waypts.push({
        location: locations[k],
        stopover: true
      });
    }
    if (k == 0) start = locations[k];

    if (k == locations.length - 1) end = locations[k];

  }
  var request = {
    origin: start,
    destination: end,
    waypoints: waypts,
    travelMode: google.maps.TravelMode.DRIVING
  };
  console.log(request);

  directionsService.push(new google.maps.DirectionsService());
  var instance = directionsService.length - 1;
  directionsDisplay.push(new google.maps.DirectionsRenderer({
    preserveViewport: true
  }));
  directionsDisplay[instance].setMap(map);
  directionsService[instance].route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      console.log(status);
      directionsDisplay[instance].setDirections(response);
    }
  });
}

google.maps.event.addDomListener(window, 'load', calcRoute);
html,
body,
#dvMap {
  height: 100%;
  width: 100%
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="dvMap"></div>

关于javascript - Google map 航点超过 8 个问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27641953/

42 4 0
文章推荐： python - mhtml 文件的标签及其含义的某处是否有主列表？
文章推荐： python - 线程 + Python 中的 raw_input
文章推荐： python - 调用通过 ssh 创建子进程的 Python 脚本挂起
文章推荐： javascript - 如何通过 jquery 提交表单并检索 JSON 数据？
行者123
个人简介

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

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