Javascript, 텍스트 상자의 내용으로 변수를 설정하십시오.

이 Google지도 거리 계산기를 필요에 맞게 조정하려고하지만 일반 Javascript 및 Jquery에만 지나치게 익숙하지 않습니다.Javascript, 텍스트 상자의 내용으로 변수를 설정하십시오.

대상 변수 중 하나를 수정하여 대신 텍스트 상자에서 가져 오려고합니다.

var destinationA = 'pe219px';

그러나 나는 보통 내가 JQuery와에있는 사람의 유형과 같은 값을 업데이트 할 수의 keyup 기능이 작업을 수행 할 것, 다음으로 변경하려고하지만 메신저 확실하지 메신저 오전 : 은 보통 줄을 읽 일반 자바 스크립트에서하고있다. 이것은 내가 지금까지 가지고 올 것을이지만, 많이 할 나타나지 않습니다

function setValue() { 
destinationA=parseInt(document.getElementById('deliverypostcode').value); 
}

이 내가이 전체 코드입니다 https://developers.google.com/maps/documentation/javascript/examples/distance-matrix

을 수정하려고하고있는 예이다 :

<!DOCTYPE html> 
    <html> 
     <head> 
     <title>Distance Matrix service</title> 
     <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
     <style> 
      html, body { 
      height: 100%; 
      margin: 0; 
      padding: 0; 
      } 

      #map-canvas { 
      height: 100%; 
      width: 50%; 
      } 
      #content-pane { 
      float:right; 
      width:48%; 
      padding-left: 2%; 
      } 
      #outputDiv { 
      font-size: 11px; 
      } 
     </style> 

     <script> 


    var map; 
    var geocoder; 
    var bounds = new google.maps.LatLngBounds(); 
    var markersArray = []; 

    var origin1 = new google.maps.LatLng(53.003604, -0.532764); 
    var origin2 = 'pe219px'; 

     function setValue() { 
     destinationA=parseInt(document.getElementById('deliverypostcode').value); 
    } 
    var destinationB = new google.maps.LatLng(53.003604, -0.532764); 

    var destinationIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=D|FF0000|000000'; 
    var originIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=O|FFFF00|000000'; 

    function initialize() { 
     var opts = { 
     center: new google.maps.LatLng(53.003604, -0.532764), 
     zoom: 8 
     }; 
     map = new google.maps.Map(document.getElementById('map-canvas'), opts); 
     geocoder = new google.maps.Geocoder(); 
    } 

    function calculateDistances() { 
     var service = new google.maps.DistanceMatrixService(); 
     service.getDistanceMatrix(
     { 
      origins: [origin1, origin2], 
      destinations: [destinationA, destinationB], 
      travelMode: google.maps.TravelMode.DRIVING, 
      unitSystem: google.maps.UnitSystem.IMPERIAL, 
      avoidHighways: false, 
      avoidTolls: false 
     }, callback); 
    } 

    function callback(response, status) { 
     if (status != google.maps.DistanceMatrixStatus.OK) { 
     alert('Error was: ' + status); 
     } else { 
     var origins = response.originAddresses; 
     var destinations = response.destinationAddresses; 
     var outputDiv = document.getElementById('outputDiv'); 
     outputDiv.innerHTML = ''; 
     deleteOverlays(); 

     for (var i = 0; i < origins.length; i++) { 
      var results = response.rows[i].elements; 
      addMarker(origins[i], false); 
      for (var j = 0; j < results.length; j++) { 
      addMarker(destinations[j], true); 
      outputDiv.innerHTML += origins[i] + ' to ' + destinations[j] 
       + ': ' + results[j].distance.text + '<br>'; 
      } 
     } 
     } 
    } 

    function addMarker(location, isDestination) { 
     var icon; 
     if (isDestination) { 
     icon = destinationIcon; 
     } else { 
     icon = originIcon; 
     } 
     geocoder.geocode({'address': location}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      bounds.extend(results[0].geometry.location); 
      map.fitBounds(bounds); 
      var marker = new google.maps.Marker({ 
      map: map, 
      position: results[0].geometry.location, 
      icon: icon 
      }); 
      markersArray.push(marker); 
     } else { 
      alert('Geocode was not successful for the following reason: ' 
      + status); 
     } 
     }); 
    } 

    function deleteOverlays() { 
     for (var i = 0; i < markersArray.length; i++) { 
     markersArray[i].setMap(null); 
     } 
     markersArray = []; 
    } 

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


     </head> 
     <body> 
     <div id="content-pane"> 
      <div id="inputs"> 

     <form name="form1" method="post" action=""> 
     <label for="deliverypostcode">Your Postcode</label> 
     <input type="text" name="deliverypostcode" id="deliverypostcode"> 
     </form> 

      <p><button type="button" onclick="calculateDistances();">Calculate 
      distances</button></p> 
      </div> 
      <div id="outputDiv"></div> 
     </div> 
     <div id="map-canvas"></div> 
     </body> 
    </html>

출처

2013-12-11 Iain Simpson

함수 setValue는 호출되지 않습니다.

삭제하고 calculateDistances의 시작 부분에 다음 행을 추가하면 어떻게됩니까?

var destinationA= document.getElementById('deliverypostcode').value;

이것은 저에게 적합합니다. 또한 텍스트 입력을 parseInt 필요가 없습니다. 지오 코딩은 문자열을 위도/경도 좌표로 변환합니다.

출처

2013-12-11 10:56:42 Delforge

지도로드가 중단되고 페이지에 텍스트 상자와 입력란이 표시되고 우편 번호가 입력되면 아무 것도 표시되지 않습니다. –

함수 안에 줄을 추가 했습니까? – Delforge

Javascript, 텍스트 상자의 내용으로 변수를 설정하십시오.

답변

관련 문제