显示中路(航路点)在谷歌地图上的纬度和经度基础

Question

我想在谷歌地图中显示中途。我跟踪了这个网址:https://developers.google.com/maps/documentation/javascript/examples/directions-waypoints。我确实犯了一个错误，地图没有显示多中途。

当我使用这个方法时，状态不是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库包含

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

案例:1

，但在中间使用单个静态时。谷歌地图做标记。

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

Answer 1

您的方向请求返回ZERO_RESULTS，当状态为!= "OK"时您不显示任何内容，因此您的地图静默失败。

你的三个"中间点"都在沙漠的中间。

<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[]">

因此，方向服务无法找到包含它们的路线，因此返回状态为ZERO_RESULTS。

您选择的"静态中途":

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

位于埃及的Esna，因此方向服务可以返回包含该信息的路线。

概念验证

代码片段:

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[]">