Google Map Direction mit Daten von Mysql

Question

Wie macht man die Richtung auf Google Maps? Ich bin sehr neu auf Google Maps. Ich habe Tutorial auf Google-Entwicklern versucht, aber es verwendet Places-Bibliothek, wenn es Richtungen vorgibt. aber mein Problem ist, ich habe zwei Punkte, zum Beispiel Punkt A und B. Punkt A und B haben Breiten- und Längengrad, die in MySQL gespeichert sind. Wie kann ich Richtung von 2 Punkten machen (Punkt A & B), die Länge und Länge auf mysql gespeichert? Danke.

Answer 1

Das verknüpfte Lernprogramm verwendet nicht die Bibliothek places.

Wenn Sie den Fixbreitengrad & Longitude verwenden möchten, holen Sie sie aus der DB, erstellen Sie google.maps.LatLng 's (oder LatLngLiterals) basierend auf den Werten und verwenden Sie sie als Ursprung und Ziel.

Beispiel (vorausgesetzt, Sie 4 PHP-Variablen $point_a_lat, $point_a_lng, $point_b_lat, $point_b_lng erstellen)

function initMap() { 
 
    var directionsService = new google.maps.DirectionsService; 
 
     map = new google.maps.Map(document.getElementById('map'), { 
 
     zoom: 7, 
 
     center: {lat: 41.85, lng: -87.65} 
 
     }), 
 
     directionsDisplay = new google.maps.DirectionsRenderer({map:map}), 
 
     displayRoute=function(origin,destination){ 
 
      directionsService.route({ 
 
      origin: origin, 
 
      destination: destination, 
 
      travelMode: google.maps.TravelMode.DRIVING 
 
      }, function(response, status) { 
 
       if (status === google.maps.DirectionsStatus.OK) { 
 
        directionsDisplay.setDirections(response); 
 
       } else { 
 
        alert('Directions request failed due to ' + status); 
 
       } 
 
       }); 
 
     }; 
 
     
 
     displayRoute(
 
     { 
 
      //lat:<?php echo $point_a_lat;?>, 
 
      //lng:<?php echo $point_a_lng;?>, 
 
      lat:52.52, 
 
      lng:13.40 
 
     }, 
 
     { //lat:<?php echo $point_b_lat;?>, 
 
      //lng:<?php echo $point_b_lng;?>, 
 
      lat: 48.85, 
 
      lng: 2.35 
 
     } 
 
    ); 
 
}

html, body { 
 
     height: 100%; 
 
     margin: 0; 
 
     padding: 0; 
 
     } 
 
     #map { 
 
     height: 100%; 
 
     }

<div id="map"></div> 
 
<script src="https://maps.googleapis.com/maps/api/js?v=3&callback=initMap" 
 
     async defer></script>