Question

需要你的帮助来添加多个开始和放大结束方向服务谷歌地图（使用PHP）。我尝试使用for循环创建多个start＆amp;结束，但它只显示最后一个循环。我需要多开始和结束。

这是我的代码：

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
    <script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var locations1 = [
            <?php
                $sql2= "SELECT sitestart, sitend, latitudestart, latitudeend, longitudestart, longitudeend, ( 6371 * acos( cos( radians('$lat') ) * cos( radians( latitudestart ) ) * cos( radians( longitudestart ) - radians('$long') ) + sin( radians('$lat') ) * sin( radians( latitudestart ) ) ) ) AS distance FROM data_section HAVING distance<2 ORDER BY distance";
                $hasil2 = mysql_query($sql2,$conn);
                while( $row2 =mysql_fetch_array($hasil2)){
                    $siteid2 = $row2['sitestart'];
                    $long2 = $row2['longitudestart'];
                    $lat2 = $row2['latitudestart'];
                    $siteid3 = $row2['sitend'];
                    $long3 = $row2['longitudeend'];
                    $lat3 = $row2['latitudeend'];
                    $awal = "[";
                    $akhir = "]";
                    $petik = "'";
                    $koma = ",";
                    echo $awal;echo $petik;echo $siteid2;echo $petik;echo $koma;echo $petik;echo $siteid3;echo $petik;echo $koma;echo $lat2;echo $koma;echo $long2; echo $koma;echo $lat3;echo $koma;echo $long3;echo $akhir; echo $koma;

                }
                ?>
            ];


function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var awal = new google.maps.LatLng(<?php echo $lat;?>,<?php echo $long;?>);
  var mapOptions = {
    zoom: 15,
    center: awal
  }
  map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
  directionsDisplay.setMap(map);
  var i;
for (i = 0; i < locations1.length; i++) {
  var start = new google.maps.LatLng(locations1[i][2], locations1[i][3]);
  var end = new google.maps.LatLng(locations1[i][4], locations1[i][5]);
  //var start = document.getElementById('start').value;

  var request = {
      origin: start,
      destination: end,
      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.addDomListener(window, 'load', initialize);

 </script>

Answer 1

您需要为每条路线使用单独的DirectionsService和DirectionsRenderer。警告：DirectionsService受配额和费率限制的约束，具体取决于您请求的路由数量，您可能需要处理。

0x68 0x00 0x65 0x00 0x6C 0x00 0x6C 0x00 0x6F 0x00

working fiddle with 2 routes

代码段（包含3条路线）：

＆＃13;

directionsServices = [];
directionsDisplays = [];
for (i = 0; i < locations1.length; i++) {
  directionsServices[i] = new DirectionsService();
  var start = new google.maps.LatLng(locations1[i][2], locations1[i][3]);
  var end = new google.maps.LatLng(locations1[i][4], locations1[i][5]);

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

    directionsServices[i].route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplays.push(new DirectionsRenderer());
      directionsDisplays[directionsDisplays.length-1].setMap(map);
      directionsDisplays[directionsDisplays.length-1].setDirections(response);
    } else alert("Directions request failed:"+status);
  });
}

＆＃13;

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var locations1 = [["route1","",43.152068, -79.165230,43.117574, -79.247694],
                  ["route2","",43.096214,-79.037739,42.8864468, -78.8783689],
                  ["route3","",43.1371937, -78.8848068,43.0851069, -78.8722341]
            ];


function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var awal = new google.maps.LatLng(43,-79);
  var mapOptions = {
    zoom: 10,
    center: awal
  }
  map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
  directionsDisplay.setMap(map);
  var i;
    directionsServices = [];
    directionsDisplays = [];
    for (i = 0; i < locations1.length; i++) {
      directionsServices[i] = new google.maps.DirectionsService();
      var start = new google.maps.LatLng(locations1[i][2], locations1[i][3]);
      var end = new google.maps.LatLng(locations1[i][4], locations1[i][5]);
    
      var request = {
          origin: start,
          destination: end,
          optimizeWaypoints: true,
          travelMode: google.maps.TravelMode.DRIVING
      };
      
        directionsServices[i].route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplays.push(new google.maps.DirectionsRenderer({preserveViewport:true}));
          directionsDisplays[directionsDisplays.length-1].setMap(map);
          directionsDisplays[directionsDisplays.length-1].setDirections(response);
        } else alert("Directions request failed:"+status);
      });
    }}
google.maps.event.addDomListener(window, 'load', initialize);

＆＃13;

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

＆＃13;

如何添加多个start＆amp;结束方向服务谷歌地图PHP

1 个答案: