Google Maps API V3: Wie wird die Richtung von Punkt A zu Punkt B angezeigt (blaue Linie)?

Ich habe Breiten- und Längengrade für 2 Punkte in der Datenbank. Ich möchte, dass auf meiner Google Map eine Route von Punkt A nach Punkt B angezeigt wird.

Genau wie wir hier sehen (Google Maps Richtungen)

Wie zeichne ich diese Richtungslinie auf der Karte?

Verwenden Sie den Wegbeschreibungsdienst der Google Maps API v3. Es ist im Grunde dasselbe wie die Wegbeschreibungs-API, jedoch gut in die Google Maps-API gepackt, die auch eine bequeme Möglichkeit bietet, die Route auf der Karte einfach zu rendern.

Informationen und Beispiele zum Rendern der Routenroute auf der Karte finden Sie im Abschnitt zum Rendern von Routen Dokumentation zu Google Maps API v3.

Verwenden von Javascript

Ich habe eine funktionierende Demo erstellt, die zeigt, wie der Google Maps API Directions Service in Javascript über a verwendet wird

• DirectionsService Objekt zum Senden und Empfangen von Richtungsanfragen
• DirectionsRenderer Objekt zum Rendern der zurückgegebenen Route auf der Karte

function initMap() {
  var pointA = new google.maps.LatLng(51.7519, -1.2578),
    pointB = new google.maps.LatLng(50.8429, -0.1313),
    myOptions = {
      zoom: 7,
      center: pointA
    },
    map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
    // Instantiate a directions service.
    directionsService = new google.maps.DirectionsService,
    directionsDisplay = new google.maps.DirectionsRenderer({
      map: map
    }),
    markerA = new google.maps.Marker({
      position: pointA,
      title: "point A",
      label: "A",
      map: map
    }),
    markerB = new google.maps.Marker({
      position: pointB,
      title: "point B",
      label: "B",
      map: map
    });

  // get route from A to B
  calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB);

}



function calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB) {
  directionsService.route({
    origin: pointA,
    destination: pointB,
    travelMode: google.maps.TravelMode.DRIVING
  }, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}

initMap();

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

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

<div id="map-canvas"></div>

Auch auf Jsfiddle: http://jsfiddle.net/user2314737/u9no8te4/

Verwenden von Google Maps Web Services

Sie können die Webdienste mithilfe eines API_KEY verwenden, der eine Anforderung wie folgt ausgibt:

https://maps.googleapis.com/maps/api/directions/json?origin=Toronto&destination=Montreal&key=API_KEY

Ein API_KEY kann in der Google Developer Console mit einem Kontingent von 2.500 kostenlosen Anfragen pro Tag abgerufen werden.

Eine Anforderung kann JSON- oder XML-Ergebnisse zurückgeben, mit denen ein Pfad auf einer Karte gezeichnet werden kann.

Die offizielle Dokumentation für Webdienste mit der Google Maps Directions-API finden Sie hier

In Ihrem Fall handelt es sich hier um eine Implementierung mit dem Richtungsdienst .

function displayRoute() {

    var start = new google.maps.LatLng(28.694004, 77.110291);
    var end = new google.maps.LatLng(28.72082, 77.107241);

    var directionsDisplay = new google.maps.DirectionsRenderer();// also, constructor can get "DirectionsRendererOptions" object
    directionsDisplay.setMap(map); // map should be already initialized.

    var request = {
        origin : start,
        destination : end,
        travelMode : google.maps.TravelMode.DRIVING
    };
    var directionsService = new google.maps.DirectionsService(); 
    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        }
    });
}

  // First Initiate your map. Tie it to some ID in the HTML eg. 'MyMapID'
  var map = new google.maps.Map(
    document.getElementById('MyMapID'),
    {
      center: {
        lat: Some.latitude,
        lng: Some.longitude
      }
    }
  );
  // Create a new directionsService object.
  var directionsService = new google.maps.DirectionsService;
    directionsService.route({
      origin: origin.latitude +','+ origin.longitude,
      destination: destination.latitude +','+ destination.longitude,
      travelMode: 'DRIVING',
    }, function(response, status) {
      if (status === google.maps.DirectionsStatus.OK) {
        var directionsDisplay = new google.maps.DirectionsRenderer({
          suppressMarkers: true,
          map: map,
          directions: response,
          draggable: false,
          suppressPolylines: true, 
          // IF YOU SET `suppressPolylines` TO FALSE, THE LINE WILL BE
          // AUTOMATICALLY DRAWN FOR YOU.
        });

        // IF YOU WISH TO APPLY USER ACTIONS TO YOUR LINE YOU NEED TO CREATE A 
        // `polyLine` OBJECT BY LOOPING THROUGH THE RESPONSE ROUTES AND CREATING A 
        // LIST
        pathPoints = response.routes[0].overview_path.map(function (location) {
          return {lat: location.lat(), lng: location.lng()};
        });

        var assumedPath = new google.maps.Polyline({
         path: pathPoints, //APPLY LIST TO PATH
         geodesic: true,
         strokeColor: '#708090',
         strokeOpacity: 0.7,
         strokeWeight: 2.5
       });

       assumedPath.setMap(map); // Set the path object to the map

Verwenden Sie die Anweisungen API .

Machen Sie einen Ajax-Anruf, dh

https://maps.googleapis.com/maps/api/directions/json?parameters

und analysieren Sie dann die Antwort

Ich verwende ein Popup, um die Karte in einem neuen Fenster anzuzeigen. Ich benutze die folgende URL

https://www.google.com/maps?z=15&daddr=LATITUDE,LONGITUDE

HTML-Snippet

<a target='_blank' href='https://www.google.com/maps?z=15&daddr=${location.latitude},${location.longitude}'>Calculate route</a>