Question

我想按航点的顺序显示折线。考虑我想从A（源）到C（目的地）到B（中点），然后折线也应该以相同的顺序显示。但是我的代码工作不正常。折线应按A，B和C的顺序绘制。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyBkDLA8MD77ueEwwxMgxadTBtzjgU0fJE0"></script>
<script>
 // The below code shows polyline incorrectly

var map;
var wyPts = [];

function addWayPoints(location) {
    wyPts.push({
        location: location,
        stopover: true
    });
}

function createInfoWindowContent(latLng, contentStr) {
    var content = '<p><b>' + contentStr + ' </b> </p>' + 'LatLng: ' + latLng;
    return content;
}

function displayRoute(origin, destination, service, display) {
    service.route({
            origin: origin,
            destination: destination,
            waypoints: wyPts,
            optimizeWaypoints: false,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        },
        function (response, status) {
            if (status === google.maps.DirectionsStatus.OK) {
                display.setDirections(response);
            }
            else {
                alert('Could not display directions due to: ' + status);
            }
        }
    );
}

function initMap() {
    var src = new google.maps.LatLng(17.45165, 78.3942433);
    var midPt1 = new google.maps.LatLng(17.4510881, 78.3932577);
    addWayPoints(midPt1);

    var destination = new google.maps.LatLng(17.4517866, 78.3927456);

    map = new google.maps.Map(document.getElementById('map'), {
    center: src,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        position: google.maps.ControlPosition.TOP_RIGHT,
        mapTypeIds: [google.maps.MapTypeId.ROADMAP,
        google.maps.MapTypeId.TERRAIN,
        google.maps.MapTypeId.HYBRID]
    },
    zoomControl: true,
    zoomControlOptions: {
        position: google.maps.ControlPosition.RIGHT_CENTER
    },
    zoom: 14
});

/*var coordInfoWindowSrc = new google.maps.InfoWindow({
    content: createInfoWindowContent(src, "Source"),
    maxWidth: 180
});
coordInfoWindowSrc.setPosition(src);
coordInfoWindowSrc.open(map);

var coordInfoWindowDest = new google.maps.InfoWindow({
    content: createInfoWindowContent(destination, "Destination"),
    maxWidth: 180
});
coordInfoWindowDest.setPosition(destination);
coordInfoWindowDest.open(map);*/


var polylineProps = {
    strokeColor: '#009933',
    strokeOpacity: 1.0,
    strokeWeight: 3

};


var directionsDisplay = new google.maps.DirectionsRenderer({
    draggable: false, 
    map: map,
    suppressMarkers: false,
    polylineOptions: polylineProps
});

var directionsService = new google.maps.DirectionsService();

displayRoute(src, destination, directionsService, directionsDisplay);

directionsDisplay.addListener(
    'change',

function () {
    displayRoute(src, destination, directionsService,
    directionsDisplay);
});


}
google.maps.event.addDomListener(window, 'load', initMap);
</script>


<html>
    <div id="map" style="width:100%; height:90vh;">
        <div id="map-canvas" style="width:100%; height:100%;"></div>
        <div id="crosshair"></div>
    </div>
</html>

Answer 1

您的代码正在执行您正在编写的代码。路线从源（S）到中点（M）然后（回溯）到达目的地（D，在起点和中点之间）。您无法看到路线的重叠，因为它覆盖了原始路线。在“面板”方向查看路线说明。

proof of concept fiddle

代码段

var map;
var wyPts = [];

function addWayPoints(location) {
  wyPts.push({
    location: location,
    stopover: true
  });
}

function createInfoWindowContent(latLng, contentStr) {
  var content = '<p><b>' + contentStr + ' </b> </p>' + 'LatLng: ' + latLng;
  return content;
}

function displayRoute(origin, destination, service, display) {
  service.route({
      origin: origin,
      destination: destination,
      waypoints: wyPts,
      optimizeWaypoints: false,
      travelMode: google.maps.DirectionsTravelMode.DRIVING
    },
    function(response, status) {
      if (status === google.maps.DirectionsStatus.OK) {
        display.setDirections(response);
      } else {
        alert('Could not display directions due to: ' + status);
      }
    }
  );
}

function initMap() {
  var src = new google.maps.LatLng(17.45165, 78.3942433);
  var midPt1 = new google.maps.LatLng(17.4510881, 78.3932577);
  addWayPoints(midPt1);

  var destination = new google.maps.LatLng(17.4517866, 78.3927456);

  map = new google.maps.Map(document.getElementById('map'), {
    center: src,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
      position: google.maps.ControlPosition.TOP_RIGHT,
      mapTypeIds: [google.maps.MapTypeId.ROADMAP,
        google.maps.MapTypeId.TERRAIN,
        google.maps.MapTypeId.HYBRID
      ]
    },
    zoomControl: true,
    zoomControlOptions: {
      position: google.maps.ControlPosition.RIGHT_CENTER
    },
    zoom: 14
  });
  var markerS = new google.maps.Marker({
    map: map,
    position: src,
    title: "Source",
    label: "S"
  });
  var markerD = new google.maps.Marker({
    map: map,
    position: destination,
    title: "Dest",
    label: "D"
  });
  var markerM = new google.maps.Marker({
    map: map,
    position: midPt1,
    title: "Mid",
    label: "M"
  });

  var polylineProps = {
    strokeColor: '#009933',
    strokeOpacity: 1.0,
    strokeWeight: 3
  };

  var directionsDisplay = new google.maps.DirectionsRenderer({
    draggable: false,
    map: map,
    suppressMarkers: true,
    polylineOptions: polylineProps
  });
  directionsDisplay.setPanel(document.getElementById("panel"));

  var directionsService = new google.maps.DirectionsService();

  displayRoute(src, destination, directionsService, directionsDisplay);

  directionsDisplay.addListener(
    'change',

    function() {
      displayRoute(src, destination, directionsService,
        directionsDisplay);
    });
}
google.maps.event.addDomListener(window, 'load', initMap);

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map" style="width:100%; height:90vh;"></div>
<div id="panel">
</div>

Answer 2

例如，订单是A ......我，其中A是原点，我是目的地，[B-H]是航路点。

在您的代码中，您只需要交换中点和目标的坐标

var midPt1 = new google.maps.LatLng(17.4517866, 78.3927456);
...
var destination = new google.maps.LatLng(17.4510881, 78.3932577);

如何在谷歌地图中以航点的顺序显示折线？

2 个答案: