Направление карты Google, используя данные из mysql

Question

Как сделать направление на картах Google? im очень новый на картах Google. Я попробовал учебное пособие по разработчикам Google, но он использует библиотеку мест, когда он делает указания. но моя проблема в том, что у меня две точки, например точки A и B. Точки A и B имеют Локатор и долготу, которые хранятся в mysql. как я могу сделать направление из 2-х точек (точка A & B), которая хранит langtitude и longtitude на mysql? Спасибо.

Answer 1

Связанный учебник не использует библиотеку мест.

Если вы хотите использовать фиксированную широту &, то долготы выберете их из БД, создайте google.maps.LatLng (или LatLngLiterals) на основе значений и используйте их как источник и место назначения.

Пример (предполагается, что вы создаете 4 PHP-переменные $point_a_lat, $point_a_lng, $point_b_lat, $point_b_lng)

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>