Question

我想在谷歌地图中途显示。我按照这个网址：https://developers.google.com/maps/documentation/javascript/examples/directions-waypoints。我确实错误地认为地图没有多中途显示。

当我使用此方法时，状态不正常

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

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

在埃及的伊斯纳，所以路线服务可以返回包含该路线的路线。

proof of concept fiddle

代码段

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

在谷歌地图中显示纬度和经度基础上的中途（航点）

1 个答案: