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

Question

我正在尝试让 Google 地图自动为存储在我的数据库中的目的地设置行车路线。基本上，我的数据库中有几个地址（即：制造商），我希望能够输入邮政编码（或地址）以接收从该邮政编码/地址到所有可用制造商的路线（也许是花哨的额外，获取最近的制造商）。我以前从未使用过 Google Maps API，所以我对此感到相当困惑。到目前为止，我只能为可用的制造商设置标记。至于行车路线，我找了好几个小时，消化起来有点复杂。到目前为止，您建议我对这段代码采取什么方式（没有双关语）？

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

在这里你有你的问题的第一个答案，希望这可以帮助。

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>