Ändern von JavaScript in jQuery funktioniert nicht

Ich fand this Tutorial über das Hinzufügen einer Karte, die den Abstand zwischen zwei Positionen berechnet. Es funktioniert großartig. Das Problem hier ist, dass es in rohen JavaScript geschrieben ist, nicht in jQuery.Ändern von JavaScript in jQuery funktioniert nicht

Wenn ich jQuery einschließe und zum Beispiel "document.getElementById('txtSource')" durch "$('#txtSource')" ändere, wird es nicht funktionieren. Hier

ist der ursprüngliche Code: http://pastebin.com/BKqgYWEw

Hier ist meine bearbeitet Code: http://pastebin.com/ZrK7cSAb

Alle hier Anregungen?

Danke.

Quelle

2016-06-20 medk

Was hat nicht funktioniert? Wie könnte man Vermutungen darüber anstellen, ohne den Code wirklich durchzugehen? – Rayon

Haben Sie das jQuery-Plugin hinzugefügt? –

@Rayon ok Ich werde den ganzen Code einschließen – medk

Es ist wie @ssube ist, sagte: Sie waren ein jQuery-Objekt nicht ein DOM-Knoten übergeben. Ich habe versucht, das zu erreichen, was Sie wollten, indem Sie das DOM mit JQuery-Objekten durchqueren und auch die richtigen DOM-Knotenelemente an die API übergeben. Bitte beachten Sie die Arbeitslösung unter:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title></title> 
 
    <style type="text/css"> 
 
     body 
 
     { 
 
      font-family: Arial; 
 
      font-size: 10pt; 
 
     } 
 
    </style> 
 
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
 
</head> 
 
<body> 
 
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script> 
 
    <script> 
 
     var source, destination; 
 
     var directionsDisplay; 
 
     var directionsService = new google.maps.DirectionsService(); 
 
     google.maps.event.addDomListener(window, 'load', function() { 
 
      new google.maps.places.SearchBox($('#txtSource').get(0)); 
 
      new google.maps.places.SearchBox($('#txtDestination').get(0)); 
 
      directionsDisplay = new google.maps.DirectionsRenderer({ 'draggable': true }); 
 
     }); 
 

 
     function GetRoute() { 
 
      var mumbai = new google.maps.LatLng(18.9750, 72.8258); 
 
      var mapOptions = { 
 
       zoom: 7, 
 
       center: mumbai 
 
      }; 
 
      map = new google.maps.Map($('#dvMap').get(0), mapOptions); 
 
      directionsDisplay.setMap(map); 
 
      directionsDisplay.setPanel($('#dvPanel').get(0)); 
 

 
      //*********DIRECTIONS AND ROUTE**********************// 
 
      source = $('#txtSource').val(); 
 
      destination = $('#txtDestination').val(); 
 

 
      var request = { 
 
       origin: source, 
 
       destination: destination, 
 
       travelMode: google.maps.TravelMode.DRIVING 
 
      }; 
 
      directionsService.route(request, function (response, status) { 
 
       if (status == google.maps.DirectionsStatus.OK) { 
 
        directionsDisplay.setDirections(response); 
 
       } 
 
      }); 
 

 
      //*********DISTANCE AND DURATION**********************// 
 
      var service = new google.maps.DistanceMatrixService(); 
 
      service.getDistanceMatrix({ 
 
       origins: [source], 
 
       destinations: [destination], 
 
       travelMode: google.maps.TravelMode.DRIVING, 
 
       unitSystem: google.maps.UnitSystem.METRIC, 
 
       avoidHighways: false, 
 
       avoidTolls: false 
 
      }, function (response, status) { 
 
       if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status != 'ZERO_RESULTS') { 
 
        var distance = response.rows[0].elements[0].distance.text; 
 
        var duration = response.rows[0].elements[0].duration.text; 
 
        var dvDistance = $('#dvDistance'); 
 
        dvDistance.html(''); 
 
        dvDistance.html('Distance: ' + distance + '<br>'); 
 
        dvDistance.html('Duration:' + duration); 
 

 
       } else { 
 
        alert('Unable to find the distance via road.'); 
 
       } 
 
      }); 
 
     } 
 
    </script> 
 
    <table border="0" cellpadding="0" cellspacing="3"> 
 
     <tr> 
 
      <td colspan="2"> 
 
       Source: 
 
       <input type="text" id="txtSource" value="Bandra, Mumbai, India" style="width: 200px" /> 
 
       &nbsp; Destination: 
 
       <input type="text" id="txtDestination" value="Andheri, Mumbai, India" style="width: 200px" /> 
 
       <br /> 
 
       <input type="button" value="Get Route" onclick="GetRoute()" /> 
 
       <hr /> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td colspan="2"> 
 
       <div id="dvDistance"> 
 
       </div> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
       <div id="dvMap" style="width: 500px; height: 500px"> 
 
       </div> 
 
      </td> 
 
      <td> 
 
       <div id="dvPanel" style="width: 500px; height: 500px"> 
 
       </div> 
 
      </td> 
 
     </tr> 
 
    </table> 
 
    <br /> 
 
</body> 
 
</html>

Quelle

2016-06-20 14:01:51 n0m4d

Danke für die Antwort, aber es gibt wenig Problem hier, die Autovervollständigung für Quelle und Ziel funktioniert nicht mehr. – medk

Ich habe es gerade repariert, bitte den Code erneut ausführen. Fühlen Sie sich frei, diese Frage zu markieren beantwortet =) – n0m4d

jQuery-Selektoren und DOM-Elemente sind nicht das Gleiche. Sie können einen Selektor einfach nicht passieren. Sie können das Element jedoch mithilfe der get method aus dem Selektor abrufen.

console.log(document.getElementById('test').constructor, $('#test').constructor, $('#test').get(0).constructor);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="test"></div>

Quelle

2016-06-20 13:46:41 ssube

Ändern von JavaScript in jQuery funktioniert nicht

Antwort

Verwandte Themen