は、それぞれ2つのマーカーからより多くの方向を示しています

Question

私はすでに2つのマーカー、マーカー1からの経路の方向を示しています。& lng、マーカー2はlat2 & lng2を含んでいます。そのマーカーから、地図はマーカー1とマーカー2からのルートの方向を示します。私の問題は複数のマーカーがあり、マーカーの各カップルからのすべてのルート方向を表示したいので結果が地図上に表示されます。

以下の私のコードをチェックし、この

で私を助けて（私は最初からこのプロジェクトの完全なコードを追加しました）

// 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>