comment ajouter google Directions dans google maps

Question

Le code actuel récupère toutes les informations, affiche tous les marqueurs sur une carte et si un marqueur est cliqué, infowindow affiche son contenu. Ce que je veux faire, c'est que je veux mettre en œuvre des directions dans ce domaine. Comment puis-je ajouter des directions dans mon code afin qu'il ajoute également des directions? C'est ce que je veux mettre en œuvre:

ce que pour mettre en œuvre:

var request = { 
    origin: start,//it will be my first row(lat and lon) 
    destination: end,//it will be my lastrow(lat and lon) 
    waypoints: waypts, // it will be all lat and lon between first and last 
    optimizeWaypoints: true, 
    travelMode: google.maps.TravelMode.DRIVING 
}; 

directionsService.route(request, function(response, status){ 
if (status == google.maps.DirectionsStatus.OK){ 
    directionsDisplay.setDirections(response); 
} 
}); 

Mon code actuel dans lequel je veux mettre en œuvre la fonctionnalité ci-dessus signifie google directions des cartes:

déjà mis en œuvre:

$("#directions").click(function(){ 
    var lat_from_ip = $("#hidden_lat").val(); 
    var lon_from_ip = $("#hidden_lon").val(); 

    var latlng = new google.maps.LatLng(lat_from_ip, lon_from_ip); 
    var options = {zoom: 4, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP}; 
    var map = new google.maps.Map(document.getElementById('map'), options); 

    $.ajax({type: "GET", 
    dataType: 'json', 
    url: url +'//abc/my_page.php', 
    success: function(response){ 
     var total=response.length; 
     var data_array,name,type,address,lat,lon,infowindow; 
     var infowindow = new google.maps.InfoWindow(); 

     for(var i=0; i < total; i++) 
     { 
      data_array=response[i]; 
      name=data_array['name']; 
      address=data_array['address']; 
      notes=data_array['notes']; 
      lat=data_array['lat']; 
      lon=data_array['lon']; 

     var propPos = new google.maps.LatLng(lat,lon); 

      propMarker = new google.maps.Marker({ 
        position: propPos, 
        map: map, 
        icon: icon, 
        zIndex: 3}); 

var contentString = "<div>"+name+"<br/><label class='label'>Location :</label> "+address+"<br/><label class='label'>Notes :</label> "+notes + "</div>"; 

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

      bindInfoWindow(propMarker, map, infowindow, contentString); 

    } //end of for loop 
      } //end of for success 
    }); //end of for $.ajax 
    return; 


    }); 

Answer 1

Voici comment convertir votre tableau php tableau js

par exemple, vous avez php array

<?php 
$my_array = array("a","b","c"); 
?> 

maintenant js faire

<script> 
var jsArray = ["<?php echo join("\", \"", $my_array); ?>"]; 
alert(jsArray); 

et votre domaine est comme ça. permet de dire que vous avez un tableau php comme celui-ci. $ data // ceci est votre tableau php

Array 
(
[0] => Array 
    (
     [lat] => 31.453795 
     [lon] => 74.388497 
    ) 

[1] => Array 
    (
     [lat] => 31.454387 
     [lon] => 74.388541 
    ) 

[2] => Array 
    (
     [lat] => 31.453795 
     [lon] => 74.388497 
    ) 
    . 
    . 
    . 
) 

en js le font

var waypts = []; 
<?php 
foreach($data as $key => $value){ 
if(($key == '0') || ($key == count($data)-1)){ 
    continue; 
    }?> 
waypts.push({location: new google.maps.LatLng(<?php echo $data[$key]['lat'] ?>, <?php echo $data[$key]['lon'] ?>)}); 
<?php }?> 

Answer 2

Fonction pour dessiner un itinéraire, appeler quand vous voulez montrer les directions. Vous pouvez lui passer des variables et les utiliser à l'intérieur pour décider quels marqueurs seront début, fin et waypts.

function calcRoute() { 
    var startpt = yourstartlatlng; 
    var endpt = yourendlatlng; 
    var waypts = [] //your waypts array, if there are more than 1 point 
    var request = { 
     origin:startpt, 
     destination:endpt, 
     waypoints: waypts, 
     travelMode: google.maps.DirectionsTravelMode.DRIVING 
    }; 
    directionsService.route(request, function(response, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
     directionsDisplay.setDirections(response); 
     } 
    }); 
    } 

Exemple d'ici: Google Maps Api

EDIT: Lorsque vous avez un tableau en php appelé Waypts, et vous voulez avoir ces valeurs en javascript, vous devez les transmettre à java. Son un peu en désordre, mais c'est la seule façon que je connaisse:

<script type="text/javascript"> 
    var waypts = []; 
    <?php 
     $waypts= array(1, 2, 3, 4); //<-- your array, can be called like that, or just have values inside already 
     for($i = 0; $i < sizeof($waypts); $i++){ 
    ?> 
    waypts[<?php echo $i; ?>] = <?php echo $waypts[$i]; ?>; //php is interpreted before java, when site will load, these values will be inside java "waypts" variable. 
    <?php 
     } 
    ?> 
    alert(""+waypts[1]); 
</script> 

Ce code sera mis vos variables php/tableau dans un tableau java (alerte est juste pour vérifier si elle a fait le travail, vous pouvez le supprimer, une fois que vous comprendre le code). Ensuite, vous pouvez utiliser ces variables comme vous le souhaitez. PHP est interprété plus tôt que java, donc dans le code du site, vous obtiendrez waypts [0] = 1; Le code cuz php sera déjà remplacé par les valeurs du tableau.