Google Maps API使用PHP和MySQL获取路线

Question

I'm trying to make Google Maps automatically set driving routes for destinations that are stored in my database. Basically, I have a few addresses in my databases(i.e: manufacturers) and I want to be able to enter a zip code(or an address) to receive the directions from that zipcode/address to all the manufacturers available(and maybe for a fancy extra, fetch the closest manufacturer). I've never used Google Maps API before so I'm fairly confused by it. So far, I've only been able to set markers to the available manufacturers. As for the driving routes, I've looked for hours and it's a bit complex to digest. What way would you suggest me to take(no pun intended) with this piece of code that I have so far?

echo "<script>
        var locations = 
        [
        ";
            for($i = 0; $i < sizeof($locations); $i++)
            {
                echo "['".$locations[$i][0]."', '".$locations[$i][1]."', ".$locations[$i][2].", ".$locations[$i][3].", ". ($i+1) ." ]";
                if (! ($i == (sizeof($locations)-1)) )
                    echo ",";
            }
        echo "];

        var map = new google.maps.Map(document.getElementById('map'), 
        {
            zoom: 15,
            center: new google.maps.LatLng(45.892235, -72.5371626),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var infowindow = new google.maps.InfoWindow();

        var marker, i;

        for (i = 0; i < locations.length; i++) 
        {
            marker = new google.maps.Marker(
            {
                position: new google.maps.LatLng(locations[i][2], locations[i][3]),
                map: map
            });

            google.maps.event.addListener(marker, 'click', (function(marker, i) 
            {
                return function() {
                infowindow.setContent(locations[i][0]);
                infowindow.open(map, marker);
            }
          })(marker, i));
        }
</script>";

Answer 1

Here you have a first answer to your problem, hope this can help.

jQuery(document).ready(function(){

  var locations = [
    ["a","Title A",46.3,-72.5],
    ["b","Title B",45.9,-72.4],
    ["c","Title C",45.6,-72.1]
  ] ;

  var map = new google.maps.Map(
    document.getElementById('map'), 
    {
      zoom: 7,
      center: new google.maps.LatLng(45.892235, -72.5371626),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
  );

  jQuery(locations).each(function(k,v) {
    
    locations[k].push('what s in index 4 ?') ; // Push in index 4
    
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(v[2],v[3]),
      map: map,
      title: v[1]
    })
    locations[k].push(marker) ;

  }) ;

  var directionsService = new google.maps.DirectionsService;
  var directionDisplays = [] ; // We need to store displays to be abled to remove them on each "getRoute" click.

  document.getElementById('getRoutes').addEventListener('click', getRoutes);

  function getRoutes() {

    // Removing existing routes if any
    for ( i = 0 ; i < directionDisplays.length ; i++ )
      directionDisplays[i].setMap(null) ;

    directionDisplays = [] ;

    // Now the important part : for each location we look for the route
    jQuery(locations).each(function(k,v) {
        
        directionsService.route({
            origin: document.getElementById('whereami').value,
            destination: new google.maps.LatLng(v[2],v[3]) ,
            travelMode: 'DRIVING'
        }, function (response, status) {
          if (status === 'OK') {
            // This callback is call asynchronous, this is probably why it's complicated to access locations[k]
            var directionsDisplay = new google.maps.DirectionsRenderer ;
            directionsDisplay.setMap(map) ;
            // We remove the marker "B" added by directionsDisplay.
            directionsDisplay.setOptions( { suppressMarkers: true } );
            directionsDisplay.setDirections(response);
            directionDisplays.push(directionsDisplay) ;
            var point = response.routes[ 0 ].legs[ 0 ];

            // We affect the direction to the marker to make it accessible later
            locations[k][5].duration = point.distance.text ;

            // And know we just have to add a listener.
            locations[k][5].addListener('click',function(){
                console.log(this.title,this.duration) ;
            }) ;

          } else {
            window.alert('Directions request failed due to ' + status);
          }
       }
      );
    }) ;
  }

}) ;

div#map {
width:50% ;
height:250px ;
float:left ;
}

div#boutons {
float:right;
width:200px ;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
<div id="boutons">
  <input type="text" id="whereami" value="Ottawa" />
  <button id="getRoutes">get routes</button>
</div>

</div>