Google Maps Instructions de service API Affichage directions texte Repeating

Question

J'utilise Google Maps API JavaScript pour afficher les itinéraires et les directions de texte:

JS:

var geocoder; 
var map; 
var search_lat; 
var search_lng; 

function initMap() { 

    var myLatLng = { 
     lat: 38.5803844, 
     lng: -121.50024189999999 
    }; 

    map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 16, 
     center: myLatLng, 
    }); 

    geocoder = new google.maps.Geocoder(); 

    document.getElementById('search_button').addEventListener('click', function() { 
     getDirectionsByAddress(geocoder, map); 
    }); 

    var locations = <?php echo json_encode($locations_array); ?>; 

    var infowindow = new google.maps.InfoWindow(); 

    var marker, i; 

    for (i = 0; i < locations.length; i++) { 

     marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(locations[i][5], locations[i][6]), 
      animation: google.maps.Animation.DROP, 
      icon: icon_image, 
      map: map 
     }); 
    } 

} 

function getDirectionsByAddress() { 

    // GET THE SEARCH ADDRESS 

    var address = document.getElementById('address').value; 
    console.log('search address: ' + address); 

    geocoder.geocode({ 'address': address}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      search_lat = results[0].geometry.location.lat(); 
      search_lng = results[0].geometry.location.lng(); 
      console.log('search address coordinates: ' + search_lat + ', ' + search_lng); 
     } else { 
      alert("Geocode was not successful for the following reason: " + status); 
     } 
    }); 

    // INITIALIZE GOOGLE MAPS DIRECTIONS SERVICE 

    var directionsDisplay = new google.maps.DirectionsRenderer; 
    var directionsService = new google.maps.DirectionsService; 

    directionsDisplay.setMap(map); 
    directionsDisplay.setPanel(document.getElementById('directions')); 

    calculateAndDisplayRoute(directionsService, directionsDisplay); 

    // CHECK THE MODE OF TRAVEL 

    document.getElementById('mode').addEventListener('change', function() { 
     calculateAndDisplayRoute(directionsService, directionsDisplay); 
    }); 

    // CALCULATE THE DIRECTIONS BASED ON ADDRESS ENTERED AND MODE OF TRAVEL 

    function calculateAndDisplayRoute(directionsService, directionsDisplay) { 
     console.log('search address coordinates: ' + search_lat + ', ' + search_lng); 
     var selectedMode = document.getElementById('mode').value; 
     directionsService.route({ 
      origin: {lat: search_lat, lng: search_lng}, 
      destination: {lat: 38.5803844, lng: -121.50024189999999}, 
      travelMode: google.maps.TravelMode[selectedMode] 
     }, function(response, status) { 
      if (status == google.maps.DirectionsStatus.OK) { 
      directionsDisplay.setDirections(response); 
      } else { 
      window.alert('Directions request failed due to ' + status); 
      } 
     }); 
    } 

} 

Je vais avoir des problèmes avec la fonction getDirectionsByAddress . Lorsque je recherche un emplacement et que je clique sur le bouton de recherche la première fois, rien ne se passe. Au deuxième clic du bouton de recherche, l'itinéraire est dessiné avec succès sur la carte et les directions sont affichées, cependant les directions sont affichées deux fois (il semble que les directions ont été calculées sur le premier clic, mais seulement sur le deuxième clic sont ils sont affichés). Si je cherche une troisième fois, le troisième ensemble de directions est cloué sur et cela se répète encore et encore.

Il semble que j'ai besoin de réinitialiser les valeurs lat et lng pendant chaque recherche. J'ai essayé:

delete search_lat; 
delete search_lng; 

et à la fin de la fonction calculateAndDisplayRoute. Pas de chance.

HTML:

<div id="map"></div> 

<div id="directions"> 

    <h3>Directions</h3> 

</div> 

<div class="search_block"> 

    <input type="text" name="address" id="address" class="address" placeholder="Where are you coming from?" /> 

</div> 

<div class="search_block">  

    <select name="travel_mode" id="mode"> 
     <option>DRIVING</option> 
     <option>WALKING</option> 
     <option>BICYCLE</option> 
     <option>TRANSIT</option> 
    </select> 

</div> 

<div class="search_block"> 

    <button id="search_button" onclick="getDirectionsByAddress();">Search</button> 

</div> 

Question: Comment puis-je faire pour que les directions sont rafraîchies avec un seul jeu de coordonnées lors de chaque recherche?

Answer 1

• search_lat et search_lng sont nuls jusqu'à ce que le géocodeur renvoie des résultats.
• le géocodeur est asynchrone, ses résultats ne reviennent qu'après que vous ayez passé le premier appel au service de directions.

un soupçon est cette erreur dans la console javascript: Uncaught TypeError: Cannot read property 'b' of null

Déplacer l'appel au service des directions dans la fonction de rappel pour le géocodage (où/quand les données existent).

Corrigez cela et créez une instance unique de DirectionsRenderer et cela fonctionne pour moi.

proof of concept fiddle

extrait de code:

google.maps.event.addDomListener(window, "load", initMap); 
 
var geocoder; 
 
var map; 
 
var search_lat; 
 
var search_lng; 
 
var directionsDisplay; 
 
var directionsService; 
 

 
function initMap() { 
 

 
    var myLatLng = { 
 
    lat: 38.5803844, 
 
    lng: -121.50024189999999 
 
    }; 
 

 
    map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 16, 
 
    center: myLatLng, 
 
    }); 
 
    directionsDisplay = new google.maps.DirectionsRenderer; 
 
    directionsService = new google.maps.DirectionsService; 
 

 

 
    geocoder = new google.maps.Geocoder(); 
 

 
    document.getElementById('search_button').addEventListener('click', function() { 
 
    getDirectionsByAddress(geocoder, map); 
 
    }); 
 

 
    var locations = []; //<?php echo json_encode($locations_array); ?>; 
 

 
    var infowindow = new google.maps.InfoWindow(); 
 

 
    var marker, i; 
 

 
    for (i = 0; i < locations.length; i++) { 
 

 
    marker = new google.maps.Marker({ 
 
     position: new google.maps.LatLng(locations[i][5], locations[i][6]), 
 
     animation: google.maps.Animation.DROP, 
 
     icon: icon_image, 
 
     map: map 
 
    }); 
 
    } 
 

 
} 
 

 
function getDirectionsByAddress() { 
 

 
    // GET THE SEARCH ADDRESS 
 

 
    var address = document.getElementById('address').value; 
 
    console.log('search address: ' + address); 
 

 
    geocoder.geocode({ 
 
    'address': address 
 
    }, function(results, status) { 
 
    if (status == google.maps.GeocoderStatus.OK) { 
 
     search_lat = results[0].geometry.location.lat(); 
 
     search_lng = results[0].geometry.location.lng(); 
 
     console.log('search address coordinates: ' + search_lat + ', ' + search_lng); 
 
     calculateAndDisplayRoute(directionsService, directionsDisplay); 
 
    } else { 
 
     alert("Geocode was not successful for the following reason: " + status); 
 
    } 
 
    }); 
 

 
    // INITIALIZE GOOGLE MAPS DIRECTIONS SERVICE 
 

 
    directionsDisplay.setMap(map); 
 
    directionsDisplay.setPanel(document.getElementById('directions')); 
 

 

 

 
    // CHECK THE MODE OF TRAVEL 
 

 
    document.getElementById('mode').addEventListener('change', function() { 
 
    calculateAndDisplayRoute(directionsService, directionsDisplay); 
 
    }); 
 

 
    // CALCULATE THE DIRECTIONS BASED ON ADDRESS ENTERED AND MODE OF TRAVEL 
 

 
    function calculateAndDisplayRoute(directionsService, directionsDisplay) { 
 
    console.log('search address coordinates: ' + search_lat + ', ' + search_lng); 
 
    var selectedMode = document.getElementById('mode').value; 
 
    directionsService.route({ 
 
     origin: { 
 
     lat: search_lat, 
 
     lng: search_lng 
 
     }, 
 
     destination: { 
 
     lat: 38.5803844, 
 
     lng: -121.50024189999999 
 
     }, 
 
     travelMode: google.maps.TravelMode[selectedMode] 
 
    }, function(response, status) { 
 
     if (status == google.maps.DirectionsStatus.OK) { 
 
     directionsDisplay.setDirections(response); 
 
     } else { 
 
     window.alert('Directions request failed due to ' + status); 
 
     } 
 
    }); 
 
    } 
 

 
}

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

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

 
    <h3>Directions</h3> 
 

 
</div> 
 

 
<div class="search_block"> 
 

 
    <input type="text" name="address" id="address" class="address" placeholder="Where are you coming from?" value="San Franscisco, CA" /> 
 

 
</div> 
 

 
<div class="search_block"> 
 

 
    <select name="travel_mode" id="mode"> 
 
    <option>DRIVING</option> 
 
    <option>WALKING</option> 
 
    <option>BICYCLE</option> 
 
    <option>TRANSIT</option> 
 
    </select> 
 

 
</div> 
 

 
<div class="search_block"> 
 

 
    <button id="search_button" onclick="getDirectionsByAddress();">Search</button> 
 

 
</div> 
 
<div id="map"></div>