Javascript，設置變量從文本框的內容

我試圖適應這個谷歌地圖距離計算器到我的需要，但不是太熟悉純JavaScript，只有JQuery。Javascript，設置變量從文本框的內容

我想修改其中一個目標變量，以便它從文本框中將其拉出。通常一行：

var destinationA = 'pe219px';

但我試圖將其更改爲以下，通常我會做一個KEYUP功能來更新值jQuery中的人的類型，但林不知道什麼即時通訊在純JavaScript的。這就是我來了這麼遠，但它似乎並沒有做很多：

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;

這對我有用。另外，你不需要解析你的文本輸入。地理編碼將字符串轉換爲緯度/經度座標。

來源

2013-12-11 10:56:42 Delforge

由於某些原因，停止地圖加載和頁面只顯示文本框和輸入框，沒有顯示輸入郵編時什麼都沒有。 –

您是否在函數內添加了行？ – Delforge

Javascript，設置變量從文本框的內容

回答

相關問題