Google Maps API V3: Wie zeigt man die Richtung von Punkt A nach Punkt B (blaue Linie)?

Lesezeit: 3 Minuten

Benutzer-Avatar
Yugal Jindle

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 Anfahrt)

Bild aus dem Link

Wie zeichnet man diese Richtungslinie auf der Karte?

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

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

HTML-Ausschnitt

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

  • Hey, ich verwende diesen Code und er funktioniert gut, aber ich möchte einen weiteren Marker A bis C mit einer anderen Richtung hinzufügen. Ich versuche es auf viele Arten, aber er funktioniert nicht

    – Aniruddha Mishra

    27. April 2016 um 10:21 Uhr

  • Ich bin ziemlich neu in der Google Maps API, es funktioniert für mich, aber wie kann ich eine Entfernung mit der Route haben?

    – Sarz

    28. Juni 2016 um 6:58 Uhr

  • @Sarz schau dir diese andere Demo an, die ich gemacht habe jsfiddle.net/user2314737/fLogwsff

    – Benutzer2314737

    28. Juni 2016 um 7:31 Uhr

Benutzen Wegbeschreibungsdienst von Google Maps API v3. Es ist im Grunde dasselbe wie die Wegbeschreibungs-API, aber schön verpackt in der Google Maps-API, die auch eine bequeme Möglichkeit bietet, die Route auf der Karte einfach darzustellen.

Informationen und Beispiele zur Darstellung der Wegbeschreibung auf der Karte finden Sie in Rendering Wegbeschreibung Abschnitt der Google Maps API v3-Dokumentation.

  • @Tomik ist es möglich, dass der Code einen Bildschnappschuss macht, nachdem die Linie gezeichnet wurde?

    – CodeGuru

    5. Mai 2015 um 7:46 Uhr

  • Bitte schauen Sie sich das zweite Beispiel an: Es gibt Code 🙂

    – Nathan

    15. Juni 2018 um 1:33 Uhr

Benutzer-Avatar
Thomas Valádez

  // 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

  • @Tomik ist es möglich, dass der Code einen Bildschnappschuss macht, nachdem die Linie gezeichnet wurde?

    – CodeGuru

    5. Mai 2015 um 7:46 Uhr

  • Bitte schauen Sie sich das zweite Beispiel an: Es gibt Code 🙂

    – Nathan

    15. Juni 2018 um 1:33 Uhr

Benutzer-Avatar
Argiropoulos Stavros

Verwenden Sie die Richtungs-API.

Machen Sie einen Ajax-Aufruf, dh

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

und analysieren Sie dann die Antwort

  • Ist es möglich, dass der Code einen Bildschnappschuss macht, nachdem die Linie gezeichnet wurde?

    – CodeGuru

    5. Mai 2015 um 7:46 Uhr

1010190cookie-checkGoogle Maps API V3: Wie zeigt man die Richtung von Punkt A nach Punkt B (blaue Linie)?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy