web-dev-qa-db-fra.com

comment dessiner un itinéraire entre deux marqueurs dans google maps

Bonjour, j'essaie de tracer une carte d'itinéraire entre deux marqueurs à l'aide de javascript . Je suis incapable de trouver la cause de l'erreur. Ma carte ne se charge pas.

J'essaie de tracer une route pour les deux balises ci-dessous.

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

Quelqu'un peut-il m'aider à tracer un chemin entre les deux balises?

javascriptgoogle-maps-api-3
9
mo0206

Quelques erreurs. La première est la géolocalisation. Votre deuxième emplacement est faux car la longitude ne peut être que de +180 à -180, donc -181 n'existe pas sur la terre! Deuxièmement, comme M. Upsidedown l’a mentionné dans le commentaire, vous appelez une fonction dans une fonction. Corrigez d'abord la géolocalisation, puis vos appels de fonction, ce qui devrait résoudre les problèmes que vous rencontrez. 

0
gothical

Deux commentaires:

  1. votre question concerne les indications entre les marqueurs, mais il n’ya pas de marqueurs dans le code que vous avez posté. Il y a deux positions définies par les objets LatLng. Le service d'itinéraire ajoutera automatiquement des marqueurs au début et à la fin de l'itinéraire. Si vous souhaitez obtenir un itinéraire entre deux marqueurs, vous devez d’abord les ajouter à votre carte.
  2. Il n'y a aucun appel à calcRoute dans le code envoyé (j'ai ajouté un bouton "route" qui l'exécute).

Problèmes:

  1. le service de directions renvoie ZERO_RESULTS pour vos points d'origine. Aucun itinéraire n'est donc tracé. Ajoutez le traitement des erreurs dans le cas contraire pour que le test if (status == "OK") le voie.
  2. si je modifie les points en un lieu pouvant réellement être routé (Palo Alto, Californie), la route du service de direction n'est pas rendue car vous ne définissez jamais la propriété "map" du service de direction.

violon de travail

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();

extrait de code de travail:

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>

30
geocodezip