小贝子编程

如何使用具有捕捉到道路功能的方向服务绘制不同颜色的多段线



我正试图用谷歌api提供的快速公路功能来呈现班加罗尔市的公交路线。如果我只是渲染单个管线，它是可见的颜色，我提到的多段线的笔划颜色属性。如果路线很长，那么我会将该路线分成多条路径。但是，当我添加第二条管线时，会绘制从第一条管线的末端到第二条路线的起点的多段线。我不知道我哪里出了问题。我们非常感谢您的帮助。请找到相同的javascript代码。

<script type="text/javascript">
var infoWindow = new google.maps.InfoWindow();  
var routePath;
var OrgDest;
var OrgDestpoints;
var wp;
var waypts;
var traceroutePath;
var service;
var map;
var marker, markloc;
var markers = [];
var orgdest = {"1": [[12.9197565816171, 77.5923588994416,12.95719452, 77.56829549],[12.95719452, 77.56829549,12.98997477, 77.57209867],[12.98997477, 77.57209867,13.02311, 77.55029]],"KHC": [[12.97466107, 77.58199613,12.97466107, 77.58199613]]};
var waypoints = {"1":[[12.92268932, 77.59338455,12.92318598, 77.58877168,12.9279596, 77.58760419,12.93610683, 77.58392363,12.93672057, 77.57217014,12.93956243, 77.57215225,12.94189, 77.57358,12.94574241, 77.57070059],[12.95850855, 77.57402561,12.96161187, 77.57527904,12.96366, 77.56843,12.96811874, 77.56800682,12.97736, 77.57074,12.98997477, 77.57209867],[12.98997477, 77.57209867,12.99789013, 77.57130999,13.00908169, 77.5710476,13.01742075, 77.55707759]],"KHC": [[12.98420536, 77.59761828,12.98368012, 77.6035693]]};
var routeColors = {"1": "#FF00FF","KHC": "#800000"};
var routeNames = ["1","KHC"];
 function initialize() {
 var mapOptions = {
      center: new google.maps.LatLng(12.9536775, 77.5883784),
      zoom: 12
    };
 map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);
    //directionsDisplay.setMap(map);
    var routeInfoWindow = new google.maps.InfoWindow({ // this info window shows the route name when the mouse hovers over a route line
    disableAutoPan: true
    });
    for (var i = 0; i < routeNames.length; i++) { // loop over each route
        var routeName = routeNames[i];  
        for (var j = 0; j < orgdest[routeName].length; j++) { // loop over each path on the route               
            OrgDest = orgdest[routeName][j];
            OrgDestpoints = []              
            for (var k = 0; k < OrgDest.length; k += 2) { // loop over each point in the path
                OrgDestpoints.push(new google.maps.LatLng(OrgDest[k], OrgDest[k+1]));
            }
            waypts = [];
            if(waypoints[routeName].length > 0)
            {
                wp = waypoints[routeName][j];
                for (var k = 0; k < wp.length; k += 2) { // loop over each waypoints in the path
                    waypts.push(
                    {location:new google.maps.LatLng(wp[k], wp[k+1]),
                    stopover:true
                    });
                }
            }
            if(j>0)// & (j!=(orgdest[routeName].length)))
                traceroutePath.setMap(null); //clearing previously rendered map
            if(i>0 & j==0)
            {
                traceroutePath.setMap(null); //clearing previously rendered map
            }
            routePath = OrgDestpoints;              
            traceroutePath = new google.maps.Polyline({
                path: routePath,
                strokeColor: routeColors[routeName],
                strokeOpacity: 1.0,
                strokeWeight: 2
                });
            service = new google.maps.DirectionsService(),traceroutePath,snap_path=[];  
            traceroutePath.setMap(map);             
            for(z=0;z<routePath.length-1;z++){
            service.route({origin: routePath[z],destination: routePath[z+1],
            travelMode: google.maps.DirectionsTravelMode.DRIVING,
            waypoints: waypts},
            function(result, status) {
                if(status == google.maps.DirectionsStatus.OK) {
                    snap_path = snap_path.concat(result.routes[0].overview_path);
                    alert(result.routes[0].legs[0].start_location)
                    traceroutePath.setPath(snap_path);
                } else alert("Directions request failed: "+status);        
            });
            }                                       
        } //end of j for loop; paths to form a route
    }//end of i for loop; all routes        
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>

您有两个问题导致该问题。

  1. 代码将来自方向请求的路径连接在一起，这是一个问题，因为：

    a。方向服务是异步的，路线可能会以与发送不同的顺序返回（除非您逐个发送）。

    b。所请求的路由不是连续的。

for (z = 0; z < routePath.length - 1; z++) {
  service.route({
      origin: routePath[z],
      destination: routePath[z + 1],
      travelMode: google.maps.DirectionsTravelMode.DRIVING,
      waypoints: waypts
    },
    function(result, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        var snap_path = result.routes[0].overview_path;
        var traceroutePath = new google.maps.Polyline({
          strokeColor: routeColors[routeName],
          strokeOpacity: 1.0,
          strokeWeight: 2,
          map: map
        });
        traceroutePath.setPath(snap_path);
      } else alert("Directions request failed: " + status);
    });

概念验证小提琴

代码片段：

var infoWindow = new google.maps.InfoWindow();
var routePath;
var OrgDest;
var OrgDestpoints;
var wp;
var waypts;
var traceroutePath;
var service;
var map;
var marker, markloc;
var markers = [];
var orgdest = {
  "1": [
    [12.9197565816171, 77.5923588994416, 12.95719452, 77.56829549],
    [12.95719452, 77.56829549, 12.98997477, 77.57209867],
    [12.98997477, 77.57209867, 13.02311, 77.55029]
  ],
  "KHC": [
    [12.97466107, 77.58199613, 12.97466107, 77.58199613]
  ]
};
var waypoints = {
  "1": [
    [12.92268932, 77.59338455, 12.92318598, 77.58877168, 12.9279596, 77.58760419, 12.93610683, 77.58392363, 12.93672057, 77.57217014, 12.93956243, 77.57215225, 12.94189, 77.57358, 12.94574241, 77.57070059],
    [12.95850855, 77.57402561, 12.96161187, 77.57527904, 12.96366, 77.56843, 12.96811874, 77.56800682, 12.97736, 77.57074, 12.98997477, 77.57209867],
    [12.98997477, 77.57209867, 12.99789013, 77.57130999, 13.00908169, 77.5710476, 13.01742075, 77.55707759]
  ],
  "KHC": [
    [12.98420536, 77.59761828, 12.98368012, 77.6035693]
  ]
};
var routeColors = {
  "1": "#FF00FF",
  "KHC": "#800000"
};
var routeNames = ["1", "KHC"];
function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(12.9536775, 77.5883784),
    zoom: 12
  };
  map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
  var routeInfoWindow = new google.maps.InfoWindow({ // this info window shows the route name when the mouse hovers over a route line
    disableAutoPan: true
  });
  for (var i = 0; i < routeNames.length; i++) { // loop over each route
    var routeName = routeNames[i];
    for (var j = 0; j < orgdest[routeName].length; j++) { // loop over each path on the route               
      OrgDest = orgdest[routeName][j];
      OrgDestpoints = []
      for (var k = 0; k < OrgDest.length; k += 2) { // loop over each point in the path
        OrgDestpoints.push(new google.maps.LatLng(OrgDest[k], OrgDest[k + 1]));
      }
      waypts = [];
      if (waypoints[routeName].length > 0) {
        wp = waypoints[routeName][j];
        for (var k = 0; k < wp.length; k += 2) { // loop over each waypoints in the path
          waypts.push({
            location: new google.maps.LatLng(wp[k], wp[k + 1]),
            stopover: true
          });
        }
      }
      if (j > 0) // & (j!=(orgdest[routeName].length)))
        traceroutePath.setMap(null); //clearing previously rendered map
      if (i > 0 & j == 0) {
        traceroutePath.setMap(null); //clearing previously rendered map
      }
      routePath = OrgDestpoints;
      traceroutePath = new google.maps.Polyline({
        path: routePath,
        strokeColor: routeColors[routeName],
        strokeOpacity: 1.0,
        strokeWeight: 2
      });
      service = new google.maps.DirectionsService(), traceroutePath, snap_path = [];
      traceroutePath.setMap(map);
      for (z = 0; z < routePath.length - 1; z++) {
        service.route({
            origin: routePath[z],
            destination: routePath[z + 1],
            travelMode: google.maps.DirectionsTravelMode.DRIVING,
            waypoints: waypts
          },
          function(result, status) {
            if (status == google.maps.DirectionsStatus.OK) {
              var snap_path = result.routes[0].overview_path;
              var traceroutePath = new google.maps.Polyline({
                strokeColor: routeColors[routeName],
                strokeOpacity: 1.0,
                strokeWeight: 2,
                map: map
              });
              traceroutePath.setPath(snap_path);
            } else alert("Directions request failed: " + status);
          });
      }
    } //end of j for loop; paths to form a route
  } //end of i for loop; all routes        
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>

相关内容

  • 没有找到相关文章

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium