So ändern Sie Daten in einem Javascript-Objekt, indem Sie aus einem Textfeld mit Google Maps senden

Question

Ich entwickle eine Webanwendung, wo Uber sehr ähnlich wo Benutzer die Adresse in Ursprung und Ziel eingeben können Textfelder und Richtungen auf der Webseite angezeigt werden. Ich habe es weit genug gemacht, um Daten wie Koordinaten, Dauer, Entfernung usw. anzuzeigen. Aber ich mache es, indem ich die festen Daten 'New York' und 'Chicago' eintrage. Weiß jemand, wie ich Daten ändern kann, indem ich Adresse durch Textfelder eingib und das Skript so laufe, dass Werte meine Anfragevariable Werte ändert und Daten dementsprechend anzeigt. Hier ist mein Code:

<div> 
     Pickup address 
     <input id="address_origin" type="textbox" value=""> 
     <input id="submit_origin" type="button" value="Search"> 
</div> 
<div> 
     Drop off address 
     <input id="address_destination" type="textbox" value=""> 
     <input id="submit_destination" type="button" value="Search"> 
</div> 

    <div id="map" style="width: 400px; height: 300px;"></div> 
    Duration: <input id="duration"></div> 
    Distance: <input id="distance"></input> 
    Origin Longitude <input id="origin_longitude"></input> 
    Origin Latitude <input id="origin_latitude"></input> 
    Destination Longitude <input id="destination_longitude"></input> 
    Destination Latitude <input id="destination_latitude"></input> 


<script type="text/javascript"> 

function initialize() { 
    var directionsService = new google.maps.DirectionsService(); 
    var directionsDisplay = new google.maps.DirectionsRenderer({ 
    draggable: true 
    }); 

    var myOptions = { 
    zoom: 7, 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    streetViewControl: false, 
    } 

    var map = new google.maps.Map(document.getElementById("map"), myOptions); 
    directionsDisplay.setMap(map); 

    var geocoder = new google.maps.Geocoder(); 

    function address_to_coordinates_lat(address_text, callback) { 
    var address = address_text; 
    geocoder.geocode({ 'address': address}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
     callback(results[0].geometry.location.lat()); 
     } else { 
     alert("Geocode was not successful for the following reason: " + status); 
     } 
    }); 
    } 
    function address_to_coordinates_long(address_text, callback) { 
    var address = address_text; 
    geocoder.geocode({ 'address': address}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
     callback(results[0].geometry.location.lng()); 
     } else { 
     alert("Geocode was not successful for the following reason: " + status); 
     } 
    }); 
    } 



var request = { 
    origin: 'Chicago', 
    destination: 'New York', 
    travelMode: google.maps.DirectionsTravelMode.DRIVING 
    }; 



    directionsService.route(request, function(response, status) { 
    if (status == google.maps.DirectionsStatus.OK) { 
     directionsDisplay.setDirections(response); 
     google.maps.event.addListener(directionsDisplay, 'directions_changed', function() { 
     directions = directionsDisplay.getDirections(); 

     console.log(directions.routes[0].legs[0].start_address); 
     console.log(directions.routes[0].legs[0].end_address); 


     // Display the distance: 
     document.getElementById('distance').value = 
      directions.routes[0].legs[0].distance.value + " meters"; 
     // Display the duration: 
     document.getElementById('duration').value = 
      directions.routes[0].legs[0].duration.value + " seconds"; 
     //Display origin latitude 
     address_to_coordinates_lat(directions.routes[0].legs[0].start_address, function(location){ 
      document.getElementById('origin_latitude').value = 
      location; 
       });  
     //Display origin longitude 
     address_to_coordinates_long(directions.routes[0].legs[0].start_address, function(location){ 
      document.getElementById('origin_longitude').value = 
      location; 
       }); 

     //Display destination latitude 
     address_to_coordinates_lat(directions.routes[0].legs[0].end_address, function(location){ 
      document.getElementById('destination_latitude').value = 
      location; 
       });  
     //Display destination longitude 
     address_to_coordinates_long(directions.routes[0].legs[0].end_address, function(location){ 
      document.getElementById('destination_longitude').value = 
      location; 
       }); 

     }) 
    } else { 
     alert("directions request failed:" + status) 
    } 
    }); 
} 
google.maps.event.addDomListener(window, "load", initialize); 

    </script> 

Answer 1

Verwenden Sie die Textfelder in Ihrer Anfrage an die DirectionsService

var request = { 
    origin: document.getElementById('address_origin').value, 
    destination: document.getElementById('address_destination').value, 
    travelMode: google.maps.DirectionsTravelMode.DRIVING 
}; 

Code-Schnipsel:

function initialize() { 
 
    var directionsService = new google.maps.DirectionsService(); 
 
    var directionsDisplay = new google.maps.DirectionsRenderer({ 
 
    draggable: true 
 
    }); 
 

 
    var myOptions = { 
 
    zoom: 7, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
    streetViewControl: false, 
 
    } 
 

 
    var map = new google.maps.Map(document.getElementById("map"), myOptions); 
 
    directionsDisplay.setMap(map); 
 
    getRoute(); 
 
    var geocoder = new google.maps.Geocoder(); 
 

 
    function address_to_coordinates_lat(address_text, callback) { 
 
    var address = address_text; 
 
    geocoder.geocode({ 
 
     'address': address 
 
    }, function(results, status) { 
 
     if (status == google.maps.GeocoderStatus.OK) { 
 
     callback(results[0].geometry.location.lat()); 
 
     } else { 
 
     alert("Geocode was not successful for the following reason: " + status); 
 
     } 
 
    }); 
 
    } 
 

 
    function address_to_coordinates_long(address_text, callback) { 
 
    var address = address_text; 
 
    geocoder.geocode({ 
 
     'address': address 
 
    }, function(results, status) { 
 
     if (status == google.maps.GeocoderStatus.OK) { 
 
     callback(results[0].geometry.location.lng()); 
 
     } else { 
 
     alert("Geocode was not successful for the following reason: " + status); 
 
     } 
 
    }); 
 
    } 
 

 
    function getRoute() { 
 
    var request = { 
 
     origin: document.getElementById('address_origin').value, 
 
     destination: document.getElementById('address_destination').value, 
 
     travelMode: google.maps.DirectionsTravelMode.DRIVING 
 
    }; 
 

 

 

 
    directionsService.route(request, function(response, status) { 
 
     if (status == google.maps.DirectionsStatus.OK) { 
 
     directionsDisplay.setDirections(response); 
 
     google.maps.event.addListener(directionsDisplay, 'directions_changed', function() { 
 
      directions = directionsDisplay.getDirections(); 
 

 
      console.log(directions.routes[0].legs[0].start_address); 
 
      console.log(directions.routes[0].legs[0].end_address); 
 

 

 
      // Display the distance: 
 
      document.getElementById('distance').value = 
 
      directions.routes[0].legs[0].distance.value + " meters"; 
 
      // Display the duration: 
 
      document.getElementById('duration').value = 
 
      directions.routes[0].legs[0].duration.value + " seconds"; 
 
      //Display origin latitude 
 
      address_to_coordinates_lat(directions.routes[0].legs[0].start_address, function(location) { 
 
      document.getElementById('origin_latitude').value = 
 
       location; 
 
      }); 
 
      //Display origin longitude 
 
      address_to_coordinates_long(directions.routes[0].legs[0].start_address, function(location) { 
 
      document.getElementById('origin_longitude').value = 
 
       location; 
 
      }); 
 

 
      //Display destination latitude 
 
      address_to_coordinates_lat(directions.routes[0].legs[0].end_address, function(location) { 
 
      document.getElementById('destination_latitude').value = 
 
       location; 
 
      }); 
 
      //Display destination longitude 
 
      address_to_coordinates_long(directions.routes[0].legs[0].end_address, function(location) { 
 
      document.getElementById('destination_longitude').value = 
 
       location; 
 
      }); 
 

 
     }) 
 
     } else { 
 
     alert("directions request failed:" + status) 
 
     } 
 
    }); 
 
    } 
 
    google.maps.event.addDomListener(document.getElementById("get_route"), 'click', getRoute); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

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

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div> 
 
    Pickup address 
 
    <input id="address_origin" type="textbox" value="Chicago, IL"> 
 
    <input id="submit_origin" type="button" value="Search"> 
 
</div> 
 
<div> 
 
    Drop off address 
 
    <input id="address_destination" type="textbox" value="New York, NY" /> 
 
    <input id="submit_destination" type="button" value="Search" /> 
 
</div> 
 
<div> 
 
    <input id="get_route" type="button" value="Get Route" /> 
 
</div> 
 
<div id="map"></div> 
 
Duration: 
 
<input id="duration" />Distance: 
 
<input id="distance" />Origin Longitude 
 
<input id="origin_longitude" />Origin Latitude 
 
<input id="origin_latitude" />Destination Longitude 
 
<input id="destination_longitude" />Destination Latitude 
 
<input id="destination_latitude" />