javascript - 从每个 2 个标记 javascript 显示更多方向

Question

我已经显示了来自 2 个标记的路线方向，标记 1 包含纬度和经度，标记 2 包含纬度 2 和经度 2。从该标记， map 将显示来自标记 1 和标记 2 的路线方向，我的问题是有很多标记，我想显示每对标记的所有路线方向，因此结果是许多路线方向将显示在 map 上。帮我解决这个问题

检查下面的代码

(我从一开始就添加了该项目的完整代码)

// DIRECTION
function initMap() {

var ren, ser;
var marker, marker2;
var i, j;
var infowindow;
var directionsDisplay;
var pointA, pointB;

    var locations = [
   <?php
            include('inc/config.php');
                $sql_lokasi="select *   from lokasi";
                $result=mysql_query($sql_lokasi) or die(mysql_error());
                while($data=mysql_fetch_object($result)){
                     ?>
                        ['<?=$data->nama;?>', <?=$data->lat;?>, <?=$data->lng;?>],
       <?
                }
          ?>
    ];

    var locations2 = [
   <?php
            include('inc/config.php');
              $sql_lokasi="select idlokasi,nama,lat,lng,lat2,lng2 from lokasi";
              $result=mysql_query($sql_lokasi) or die(mysql_error());
              while($data=mysql_fetch_object($result)){
                 ?>
                    ['<?=$data->nama;?>', <?=$data->lat2;?>, <?=$data->lng2;?>],
       <?
        }
    ?>
    ];

myOptions = {
  zoom: 12,
  center: pointA,
  mapTypeId: google.maps.MapTypeId.ROADMAP
},

map = new google.maps.Map(document.getElementById('map'), myOptions),
ser = new google.maps.DirectionsService,
ren = new google.maps.DirectionsRenderer({
map: map
});

<?php
        $result = mysql_query("SELECT * FROM lokasi");
        while ($row = mysql_fetch_array($result))
        // foreach($result as $row) // <- remove this line
            echo "addMarker(new google.maps.LatLng(".$row['lat'].", ".$row['lng']."), map), 
          addMarker2(new google.maps.LatLng(".$row['lat2'].", ".$row['lng2']."), map);";       
        ?>

for (i = 0; i < locations.length; i++) { 
  pointA = new google.maps.LatLng(locations[i][1], locations[i][2])

  };

for (j = 0; j < locations2.length; j++) { 
      pointB = new google.maps.LatLng(locations2[j][1], locations2[j][2])

      };

    // get route from A to B
  calculateAndDisplayRoute(ser, ren, pointA, pointB);
}


function calculateAndDisplayRoute(ser, ren, pointA, pointB) {
ser.route({
origin: pointA,
destination: pointB,
travelMode: google.maps.TravelMode.DRIVING
}, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
    ren.setDirections(response);
    } else {
    window.alert('Directions request failed due to ' + status);
    }      
  });
}

function addMarker(pointA, map) {
        var marker = new google.maps.Marker({
            position: pointA,
            map: map,
            icon: 'seru.png',
            animation: google.maps.Animation.BOUNCE
        });

//show INFOWINDOW
        var contentString = 
        '<div id="content">'+
        '<div id="siteNotice">'+
        '</div>'+
        '<h3 id="firstHeading" class="firstHeading">START POINT</h3>'+
        '<div id="bodyContent">'+
        '<p>I want to show this with locations[i].lat and locations[1].lng</p>'+
        '<p>Web <a href="Facebook">'+
        'www.facebook.com</a> .</p>'+
        '</div>'+
        '</div>';

        var infowindow = new google.maps.InfoWindow({
          content: contentString
        });

        google.maps.event.addListener(marker, 'click', function() {
          infowindow.open(map,marker);
        });

function addMarker2(pointB, map, j) {
        var marker2 = new google.maps.Marker({
            position: pointB,
            map: map,
            icon: 'seru 2.png',
            animation: google.maps.Animation.DROP
        });

//show INFOWINDOW
        var contentString = 
        '<div id="content">'+
        '<div id="siteNotice">'+
        '</div>'+
        '<h3 id="firstHeading" class="firstHeading">END POINT</h3>'+
        '<div id="bodyContent">'+
        '<p>I want to show this with locations[j].lat2 and locations[j].lng2</p>'+
        '<p>Web <a href="Facebook">'+
        'www.facebook.com</a> .</p>'+
        '</div>'+
        '</div>';

        var infowindow = new google.maps.InfoWindow({
          content: contentString
        });

        google.maps.event.addListener(marker2, 'click', function() {
          infowindow.open(map,marker2);
        });

<小时/>

这是显示数据库中的两个标记的代码:

<?php
        $result = mysql_query("SELECT * FROM lokasi (idlokasi,nama,lat,lng,lat2,lng2");
        while ($row = mysql_fetch_array($result))
        // foreach($result as $row) // <- remove this line
            echo "addMarker(new google.maps.LatLng(".$row['lat'].", ".$row['lng']."), map), 
          addMarker2(new google.maps.LatLng(".$row['lat2'].", ".$row['lng2']."), map);";
var pointA = new google.maps.LatLng(".$row['lat'].", ".$row['lng'].")
var pointB = new google.maps.LatLng(".$row['lat2'].", ".$row['lng2'].")
        ?>

This is screenshot of my maps, there still one route direction on my map, i want to show direction from all that marker (marker yellow to marker red become one route direction)

This is my database has contain id, name, and each lat lng

Answer 1

如果您希望 calculateAndDisplayRoute 函数显示多条路线，则需要为每条路线创建一个新的 DirectionsRenderer 对象。请注意，DirectionsService 受到配额和速率限制，因此在某些时候您将开始从 DirectionsService 获取 OVER_QUERY_LIMIT 响应。

function calculateAndDisplayRoute(ser, ren, pointA, pointB) {
  var ren = new google.maps.DirectionsRenderer({
    map: map,
    preserveViewport: true
  });
  ser.route({
    origin: pointA,
    destination: pointB,
    travelMode: google.maps.TravelMode.DRIVING
  }, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      ren.setDirections(response);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}

代码片段:

var map;
// DIRECTION
function initMap() {
  var marker, marker2;
  var i, j;
  var directionsDisplay;
  var pointA, pointB;
  pointA = new google.maps.LatLng(locations[0][1], locations[0][2]);
  myOptions = {
      zoom: 6,
      center: pointA,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    },

    map = new google.maps.Map(document.getElementById('map'), myOptions),
    ser = new google.maps.DirectionsService,
    ren = new google.maps.DirectionsRenderer({
      map: map
    });

  // get routes from A to B
  for (var i = 0; i < locations.length; i++) {
    var pointA = new google.maps.LatLng(locations[i][1], locations[i][2])
    var pointB = new google.maps.LatLng(locations2[i][1], locations2[i][2])
    calculateAndDisplayRoute(ser, ren, pointA, pointB);
  }
}

function calculateAndDisplayRoute(ser, ren, pointA, pointB) {
  var ren = new google.maps.DirectionsRenderer({
    map: map,
    preserveViewport: true
  });
  ser.route({
    origin: pointA,
    destination: pointB,
    travelMode: google.maps.TravelMode.DRIVING
  }, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      ren.setDirections(response);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}
google.maps.event.addDomListener(window, "load", initMap);
// New York, NY, USA (40.7127837, -74.00594130000002)
// Newark, NJ, USA (40.735657, -74.1723667)
// Morristown, NJ, USA (40.79676670000001, -74.4815438)
var locations = [
  ["New York, NY, USA", 40.7127837, -74.00594130],
  ["Newark, NJ, USA", 40.735657, -74.1723667],
  ["Morristown, NJ, USA", 40.7967667, -74.4815438]
];
// Baltimore, MD, USA (39.2903848, -76.61218930000001)
// Boston, MA, USA (42.3600825, -71.05888010000001)
// Rochester, NY, USA (43.16103, -77.6109219)
var locations2 = [
  ["Baltimore, MD, USA", 39.2903848, -76.6121893],
  ["Boston, MA, USA", 42.3600825, -71.0588801],
  ["Rochester, NY, USA", 43.16103, -77.6109219]
];

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>