Display mid-ways (waypoints) in google map on latitude and longitude base

问题

I want to display midway in a google map. I followed this url : https://developers.google.com/maps/documentation/javascript/examples/directions-waypoints. Where I did make mistake that map didn't show multi-midway.

When I used this method status is not ok

HTML

<input id="start" type="hidden" value="25.687158,32.639656" name="start">
<input id="end" type="hidden" value="24.088931,32.899795" name="end">
<input class="midway" type="hidden" value="27.300000,32.550000" name="midpioints[]">
<input class="midway" type="hidden" value="27.200000,32.440000" name="midpioints[]">
<input class="midway" type="hidden" value="27.100000,32.300000" name="midpioints[]">

JQUERY LIBRARY INCLUDED

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>

JQUERY CODE :

function initialize() {
    var a, b, c = {
            zoom: 14,
            center: new google.maps.LatLng(mapLatStart, mapLngStart)
        },
        d = new google.maps.Map(document.getElementById("map"), c),
        e = new google.maps.LatLngBounds,
        f = new google.maps.InfoWindow; /*for(b=0;b<markers.length;b++){var g=new google.maps.LatLng(parseFloat(markers[b][1]),parseFloat(markers[b][2]));e.extend(g),a=new google.maps.Marker({position:new google.maps.LatLng(parseFloat(markers[b][1]),parseFloat(markers[b][2])),map:d,icon:markers[b][3]}),d.fitBounds(e),d.panToBounds(e)*/
    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    var map;
    directionsDisplay = new google.maps.DirectionsRenderer();
    var chicago = new google.maps.LatLng(mapLatStart, mapLngStart);
    var mapOptions = {
        zoom: 6,
        center: new google.maps.LatLng(mapLatStart, mapLngStart)
    }
    map = new google.maps.Map(document.getElementById('map'), mapOptions);
    directionsDisplay.setMap(map);

    calcRoute();


    function calcRoute() {
        var start = $('#start').val();
        var end = $('#end').val();
        var waypts = [];
        $('.midway').each(function(index, e) {
            alert($(this).val());
            waypts.push({
                location: $(this).val(),
                stopover: true
            });

        });

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

        directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            }
        }), google.maps.event.addListener(a, "click", function(a, b) {
            return function() {
                f.setContent(markers[b][0]), f.open(d, a)
            }
        }(a, b))
    }
    google.maps.event.trigger(d, "resize")
}

Case :1

but while using single static mid-way. Google map make marker.

  waypts.push({
      location:"25.300000,32.550000",
      stopover:true});

回答1:

Your directions request is returning ZERO_RESULTS, you aren't displaying anything when the status is != "OK" so your map silently fails.

Your three "mid-way" points are in the middle of the desert.

<input class="midway" type="hidden" value="27.300000,32.550000" name="midpioints[]">
<input class="midway" type="hidden" value="27.200000,32.440000" name="midpioints[]">
<input class="midway" type="hidden" value="27.100000,32.300000" name="midpioints[]">

So the directions service can't find a route containing them and returns a status of ZERO_RESULTS.

The "static mid-way" you chose:

waypts.push({
  location:"25.300000,32.550000",
  stopover:true}); 

Is in Esna, Egypt so the directions service can return a route containing that.

proof of concept fiddle

code snippet:

var mapLatStart = 25,
  mapLngStart = 32;

function initialize() {
  var a, b, c = {
      zoom: 14,
      center: new google.maps.LatLng(mapLatStart, mapLngStart)
    },
    d = new google.maps.Map(document.getElementById("map"), c),
    e = new google.maps.LatLngBounds(),
    f = new google.maps.InfoWindow();
  var directionsDisplay;
  var directionsService = new google.maps.DirectionsService();
  var map;
  directionsDisplay = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(mapLatStart, mapLngStart);
  var mapOptions = {
    zoom: 6,
    center: new google.maps.LatLng(mapLatStart, mapLngStart)
  };
  map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsDisplay.setMap(map);

  calcRoute();


  function calcRoute() {
    var start = $('#start').val();
    var end = $('#end').val();
    var waypts = [];
    $('.midway').each(function(index, e) {
      waypts.push({
        location: latLng,
        stopover: true
      });

    });

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

    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      } else {
        alert("Directions request failed, status=" + status);
      }
    }), google.maps.event.addListener(a, "click", function(a, b) {
      return function() {
        f.setContent(markers[b][0]), f.open(d, a)
      }
    }(a, b))
  }
  google.maps.event.trigger(d, "resize")
}
google.maps.event.addDomListener(window, 'load', initialize);

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map" style="border: 2px solid #3872ac;"></div>
<input id="start" type="hidden" value="25.687158,32.639656" name="start">
<input id="end" type="hidden" value="24.088931,32.899795" name="end">
<input class="midway" type="hidden" value="25.300000,32.550000" name="midpioints[]">

来源：https://stackoverflow.com/questions/31263662/display-mid-ways-waypoints-in-google-map-on-latitude-and-longitude-base