Google Maps API使用PHP和MySQL獲取路線

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>