it-swarm.com.de

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

Ich habe Breiten- und Längengrad für 2 Punkte in der Datenbank. Ich möchte, dass meine Google Map eine Route von Punkt A nach Punkt B anzeigt.

Genau wie wir sehen hier (Google Maps Routenplaner)

Image from the link

Wie zeichnet man diese Richtungslinie auf der Karte?

71
Yugal Jindle

Verwenden Sie Routenplaner von Google Maps API v3. Es ist im Grunde dasselbe wie das Routen-API, aber in Google Maps API gut verpackt, was auch eine bequeme Möglichkeit bietet, die Route auf der Karte einfach zu rendern.

Informationen und Beispiele zum Rendern der Route auf der Karte finden Sie in Abschnitt zum Rendern der Route der Dokumentation zu Google Maps API v3.

54
Tomik

Mit Javascript

Ich habe eine funktionierende Demo erstellt, in der gezeigt wird, wie der Google Maps API-Richtungsdienst 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 bei Jsfiddle: http://jsfiddle.net/user2314737/u9no8te4/

Verwenden von Google Maps-Webdiensten

Sie können die Webdienste mit einem API_KEY verwenden, der eine Anforderung wie die folgende 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 Webservices mit der Google Maps Directions API lautet hier

40
user2314737

In Ihrem Fall ist hier eine Implementierung mit Directions Service .

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);
        }
    });
}
17
  // 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
5
Thomas Valadez

Verwenden Sie die Richtungen API .

Machen Sie einen Ajax-Anruf, d.h.

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

und dann die Antwort analysieren