come disegnare un percorso tra due marker in google maps

Question

Ciao Sto cercando di disegnare una mappa del percorso tra due marker usando javascript. Ho provato vari esempi trovati online ma la mia mappa non viene caricata mentre provo diversi esempi. Non riesco a capire la causa dell'errore. La mia mappa non viene caricata.

Sto provando a tracciare un percorso per i due indicatori inferiori.

<script> 

     function mapLocation() { 
      var directionsDisplay; 
      var directionsService = new google.maps.DirectionsService(); 
      var map; 

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

      function calcRoute() { 
       var start = new google.maps.LatLng(37.334818, -121.884886); 
       var end = new google.maps.LatLng(38.334818, -181.884886); 
       var request = { 
        origin: start, 
        destination: end, 
        travelMode: google.maps.TravelMode.DRIVING 
       }; 
       directionsService.route(request, function (response, status) { 
        if (status == google.maps.DirectionsStatus.OK) { 
         directionsDisplay.setDirections(response); 
        } 
       }); 
      }    

      google.maps.event.addDomListener(window, 'load', initialize); 
     } 
     mapLocation(); 
    </script> 

Qualcuno può aiutarmi a disegnare un percorso tra i due indicatori?

Answer 1

due commenti:

1. tua domanda chiede circa le direzioni tra i marcatori, ma non ci sono marcatori nel codice che avete inviato. Ci sono due posizioni definite dagli oggetti LatLng. Il servizio indicazioni stradali aggiungerà automaticamente marcatori all'inizio e alla fine del percorso. Se vuoi ottenere indicazioni stradali tra due indicatori, dovrai prima aggiungerli alla tua mappa.
2. Non c'è nessuna chiamata a calcRoute nel codice postato (ho aggiunto un pulsante "route" che ne determina l'esecuzione).

Issues:

1. il servizio direzioni sta tornando ZERO_RESULTS per i punti di originali, in modo che nessun percorso è disegnato. Aggiungi la gestione degli errori nel caso else per il test if (status == "OK") per vederlo.
2. se cambio i punti di un luogo che può effettivamente essere instradati (Palo Alto, CA), il percorso di servizio direzioni non è eseguito il rendering perché non hai mai imposta la proprietà "mappa" del servizio direzioni

working fiddle

function mapLocation() { 
    var directionsDisplay; 
    var directionsService = new google.maps.DirectionsService(); 
    var map; 

    function initialize() { 
     directionsDisplay = new google.maps.DirectionsRenderer(); 
     var chicago = new google.maps.LatLng(37.334818, -121.884886); 
     var mapOptions = { 
      zoom: 7, 
      center: chicago 
     }; 
     map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
     directionsDisplay.setMap(map); 
     google.maps.event.addDomListener(document.getElementById('routebtn'), 'click', calcRoute); 
    } 

    function calcRoute() { 
     var start = new google.maps.LatLng(37.334818, -121.884886); 
     //var end = new google.maps.LatLng(38.334818, -181.884886); 
     var end = new google.maps.LatLng(37.441883, -122.143019); 
     var bounds = new google.maps.LatLngBounds(); 
     bounds.extend(start); 
     bounds.extend(end); 
     map.fitBounds(bounds); 
     var request = { 
      origin: start, 
      destination: end, 
      travelMode: google.maps.TravelMode.DRIVING 
     }; 
     directionsService.route(request, function (response, status) { 
      if (status == google.maps.DirectionsStatus.OK) { 
       directionsDisplay.setDirections(response); 
       directionsDisplay.setMap(map); 
      } else { 
       alert("Directions Request from " + start.toUrlValue(6) + " to " + end.toUrlValue(6) + " failed: " + status); 
      } 
     }); 
    } 

    google.maps.event.addDomListener(window, 'load', initialize); 
} 
mapLocation(); 

codice funzionante frammento:

function mapLocation() { 
 
    var directionsDisplay; 
 
    var directionsService = new google.maps.DirectionsService(); 
 
    var map; 
 

 
    function initialize() { 
 
    directionsDisplay = new google.maps.DirectionsRenderer(); 
 
    var chicago = new google.maps.LatLng(37.334818, -121.884886); 
 
    var mapOptions = { 
 
     zoom: 7, 
 
     center: chicago 
 
    }; 
 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
 
    directionsDisplay.setMap(map); 
 
    google.maps.event.addDomListener(document.getElementById('routebtn'), 'click', calcRoute); 
 
    } 
 

 
    function calcRoute() { 
 
    var start = new google.maps.LatLng(37.334818, -121.884886); 
 
    //var end = new google.maps.LatLng(38.334818, -181.884886); 
 
    var end = new google.maps.LatLng(37.441883, -122.143019); 
 
    var request = { 
 
     origin: start, 
 
     destination: end, 
 
     travelMode: google.maps.TravelMode.DRIVING 
 
    }; 
 
    directionsService.route(request, function(response, status) { 
 
     if (status == google.maps.DirectionsStatus.OK) { 
 
     directionsDisplay.setDirections(response); 
 
     directionsDisplay.setMap(map); 
 
     } else { 
 
     alert("Directions Request from " + start.toUrlValue(6) + " to " + end.toUrlValue(6) + " failed: " + status); 
 
     } 
 
    }); 
 
    } 
 

 
    google.maps.event.addDomListener(window, 'load', initialize); 
 
} 
 
mapLocation();

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

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<input type="button" id="routebtn" value="route" /> 
 
<div id="map-canvas"></div>

Answer 2

Un bel po 'di errori. La prima è la geolocalizzazione. La tua seconda posizione è sbagliata in quanto la longitudine può essere solo da +180 a -180 quindi -181 non esiste nella terra! In secondo luogo, come MrUpsidedown menzionato nel commento, si sta chiamando una funzione all'interno di una funzione. Correggere prima la geolocalizzazione e poi le chiamate di funzione, che dovrebbero risolvere i problemi che si verificano.