So erstellen Sie eine Route mit Google Maps API

-1

Ich versuche eine Route zwischen zwei Orten zu erstellen, explizit in der HTML-Datei angegeben. Ich habe versucht, die Google-Dokumentation so gut wie möglich zu kopieren, aber es scheint einfach nicht zu funktionieren.So erstellen Sie eine Route mit Google Maps API

Hier ist mein Code:

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <title>Breadcrumbz</title> 
    <style> 
      #map { 
        height: 400px; 
        width: 100%; 
      } 
    </style> 
</head> 

<body> 
    <h1>MAP!?!</h1> 
    <div id="map"></div> 
    <button onclick="calcRoute()">Click me</button> 
    <script> 
      var directionsDisplay; 
      var directionService = new google.maps.DirectionsService(); 

      function initMap() { 
        directionsDisplay = new google.maps.DirectionsRenderer(); 
        var chicago = new google.maps.LatLng(41.850033, -87.6500523); 
        var mapOptions = { 
          zoom: 7, 
          center: chicago 
        } 
        var map = new google.maps.Map(document.getElementById('map'), mapOptions); 
        directionsDisplay.setMap(map); 
      } 

      function calcRoute(){ 
        var start = new google.maps.LatLng(41.850033, -87.6500523); 
        var end = new new google.maps.LatLng(37.3229978, -122.0321823); 

        var request = { 
          origin: start, 
          destination: end, 
          travelMode: 'DRIVING' 
        }; 

        directionsService.route(request, function(response, status) { 
          if(status == 'OK') { 
            directionsDisplay.setDirections(response); 
          } else { 
          } 
        }); 
    </script> 
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBHqgK27rLZ-mWuh2Ha1wPCkMGVs0MDoQI&callback=initMap"> 
    </script> 
</body> 

</html>

Quelle

2017-08-06 ryan

Sie haben Fehler in Ihrem Code. Schauen Sie sich die JavaScript-Konsole:

Uncaught TypeError: (intermediate value) is not a constructor
(zusätzliche new auf dieser Linie: var end = new new google.maps.LatLng(37.3229978, -122.0321823);)
InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanorama
(map ist lokal auf die initMap Funktion benötigt, bestand in calcRoute oder globaler werden)
Uncaught ReferenceError: directionsService is not defined
(Tippfehler in dieser Zeile: var directionService = new google.maps.DirectionsService();, sollte directionsService sein, nicht directionService`)

Dann funktioniert es:

proof of concept fiddle

Code-Schnipsel:

var directionsDisplay; 
 
var directionsService = new google.maps.DirectionsService(); 
 

 
function initMap() { 
 
    directionsDisplay = new google.maps.DirectionsRenderer(); 
 
    var chicago = new google.maps.LatLng(41.850033, -87.6500523); 
 
    var mapOptions = { 
 
    zoom: 7, 
 
    center: chicago 
 
    } 
 
    var map = new google.maps.Map(document.getElementById('map'), mapOptions); 
 
    directionsDisplay.setMap(map); 
 
    calcRoute(map); 
 
} 
 

 
function calcRoute(map) { 
 
    var start = new google.maps.LatLng(41.850033, -87.6500523); 
 
    var end = new google.maps.LatLng(37.3229978, -122.0321823); 
 
    var request = { 
 
    origin: start, 
 
    destination: end, 
 
    travelMode: 'DRIVING' 
 
    }; 
 

 
    directionsService.route(request, function(response, status) { 
 
    if (status == 'OK') { 
 
     directionsDisplay.setDirections(response); 
 
    } else { 
 
     alert("directions request failed, status=" + status) 
 
    } 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, "load", initMap);

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

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map"></div>

Quelle

2017-08-06 22:32:21 geocodezip

So erstellen Sie eine Route mit Google Maps API

Antwort

Verwandte Themen