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，设置变量从文本框的内容

回答

相关问题