如何制作混合路径类型？ （对齐道路和简单折线）Google Maps API

时间：2018-05-01 17:06:32

标签： javascript google-maps google-maps-api-3 maps google-maps-markers

我需要绘制路径，但路上有航班。所以我想在my example中制作类似的东西，但是我需要在手册的页面初始化时绘制它。但我不知道如何将这两种方式混合绘制地图（Polilyne和Snap到道路）。它需要像一个lat lng数组一样工作：

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)
]);

这是我的代码： 如果单击地图，它会将捕捉绘制到道路路径，如果按住Shift键并单击它将绘制折线。

我需要以某种方式更新代码，如果lat lng为快速道路返回ZERO_RESULTS，请使用折线恢复道路绘图，就像在我的代码示例中一样。

这是我想要做的： map example

感谢您的帮助

＆＃13;
＆＃13; 
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]);
                            }
                        }
                    });
                }
            });
        }
＆＃13; 
html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
}

#map_canvas {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
＆＃13; 
<body onload="Init()">
<div id="map_canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBjkJC-gvn3j6T3gvd3aE2vbUS5qTEhi5s"></script>
</body>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

如果路线请求失败，请将点击的点添加到折线。

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);
}

screenshot of resulting map

代码段 

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>

答案 1 :(得分：0)

这就是我需要的，感谢所有人的帮助！

代码示例： 

<!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>

相关问题
最新问题