How to make mixed path road type? (snap to roads and simple polyline) Google Maps API

问题

I need to draw the path, but the road has the flights on the way. So I want to make something like in my example, but I need to draw it on page init instant of a manual. But I don't know how to mix this two ways to draw maps (Polilyne and Snap to roads). It needs to works from an array of lat lng like that:

var points = new google.maps.MVCArray([
   new google.maps.LatLng(39.9042, 116.407396),
   new google.maps.LatLng(34.341574, 108.93977),
   new google.maps.LatLng(31.23039, 121.473702),
   new google.maps.LatLng(31.298974, 120.585289),
   new google.maps.LatLng(30.274084, 120.15507),
   new google.maps.LatLng(25.234479, 110.179953),
   new google.maps.LatLng(23.12911, 113.264385),
   new google.maps.LatLng(22.543096, 114.057865),
   new google.maps.LatLng(22.279991, 114.158798)
]);

Here is my code: If you click on the map it draws the snap to roads path and if you hold the Shift key and click it will draw the polyline.

I need somehow update the code to make if lat lng return ZERO_RESULTS for the snap roads resume the road drawing with polyline like in my code example.

Here is the what I want to make: map example

Thanks for your help

var map, path = new google.maps.MVCArray(),
            service = new google.maps.DirectionsService(),
            shiftPressed = false,
            poly;

        google.maps.event.addDomListener(document, "keydown", function(e) {
            shiftPressed = e.shiftKey;
        });
        google.maps.event.addDomListener(document, "keyup", function(e) {
            shiftPressed = e.shiftKey;
        });

        function Init() {
            var myOptions = {
                zoom: 17,
                center: new google.maps.LatLng(37.2008385157313, -93.2812106609344),
                mapTypeId: google.maps.MapTypeId.HYBRID,
                mapTypeControlOptions: {
                    mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.SATELLITE]
                },
                disableDoubleClickZoom: true,
                scrollwheel: false,
                draggableCursor: "crosshair"
            }

            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            poly = new google.maps.Polyline({
                map: map
            });
            google.maps.event.addListener(map, "click", function(evt) {
                if (shiftPressed || path.getLength() === 0) {
                    path.push(evt.latLng);
                    if (path.getLength() === 1) {
                        poly.setPath(path);
                    }
                } else {
                    service.route({
                        origin: path.getAt(path.getLength() - 1),
                        destination: evt.latLng,
                        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]);
                            }
                        }
                    });
                }
            });
        }

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
}

#map_canvas {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

<body onload="Init()">
<div id="map_canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBjkJC-gvn3j6T3gvd3aE2vbUS5qTEhi5s"></script>
</body>

回答1:

If the directions request fails, add the clicked point to your polyline.

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 {
  console.log("directions request failed:"+status);
  // add point to polyline (makes a straight line segment
  path.push(evt.latLng);
}

code snippet:

var map, path = new google.maps.MVCArray(),
  service = new google.maps.DirectionsService(),
  shiftPressed = false,
  poly;

google.maps.event.addDomListener(document, "keydown", function(e) {
  shiftPressed = e.shiftKey;
});
google.maps.event.addDomListener(document, "keyup", function(e) {
  shiftPressed = e.shiftKey;
});

function Init() {
  var myOptions = {
    zoom: 7,
    center: new google.maps.LatLng(37.2008385157313, -93.2812106609344),
    mapTypeId: google.maps.MapTypeId.HYBRID,
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.SATELLITE]
    },
    disableDoubleClickZoom: true,
    scrollwheel: false,
    draggableCursor: "crosshair"
  }

  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  poly = new google.maps.Polyline({
    map: map
  });
  google.maps.event.addListener(map, "click", function(evt) {
    if (shiftPressed || path.getLength() === 0) {
      path.push(evt.latLng);
      if (path.getLength() === 1) {
        poly.setPath(path);
      }
    } else {
      service.route({
        origin: path.getAt(path.getLength() - 1),
        destination: evt.latLng,
        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 {
          console.log("directions request failed:" + status);
          // create polyline
          path.push(evt.latLng);
        }
      });
    }
  });
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
}

#map_canvas {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

<body onload="Init()">
  <div id="map_canvas"></div>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBjkJC-gvn3j6T3gvd3aE2vbUS5qTEhi5s"></script>
</body>

回答2:

Here it was what I needed, thanks all for the help!

Code example:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Polylines</title>
    <style>
      #map {
        height: 100%;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
function initialize() {
    var pos = new google.maps.LatLng(47.229808, -1.560401);

    var myOptions = {
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var bounds = new google.maps.LatLngBounds();
    var map = new google.maps.Map(document.getElementById('map'), myOptions);
    var service = new google.maps.DirectionsService();
    var path = [];
    var cur = 1;

    var trip = [
 
     	new google.maps.LatLng(22.396428,114.109497),
      new google.maps.LatLng(13.756331,100.501765),
      new google.maps.LatLng(1.352083,103.819836),
      new google.maps.LatLng(-6.17511,106.865039),
      new google.maps.LatLng(-6.917464,107.619123),
      new google.maps.LatLng(-7.79558,110.36949),
      new google.maps.LatLng(-8.409518,115.188916),
      new google.maps.LatLng(22.396428,114.109497),

    ];

    var poly = new google.maps.Polyline({
        strokeColor: "blue",
        strokeOpacity: 1.0,
        strokeWeight: 2
    });

    function build() {
        if (!trip[cur] || !trip[cur - 1]) {
            // build map
            poly.setPath(path);
            map.fitBounds(bounds);
            return;
        }
        bounds.extend(trip[cur]);

        service.route({
                origin: trip[cur - 1],
                destination: trip[cur],
                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 {
                path.push(trip[cur]);
            }

            cur++;
            build();
        });
    }
    bounds.extend(trip[0]);
    build();

    poly.setMap(map);
};
window.onload = function() {
    initialize();
};
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBjkJC-gvn3j6T3gvd3aE2vbUS5qTEhi5s">
    </script>
  </body>
</html>

来源：https://stackoverflow.com/questions/50120708/how-to-make-mixed-path-road-type-snap-to-roads-and-simple-polyline-google-map

标签

javascript

google-maps

google-maps-api-3

maps

google-maps-markers