Question

我正在尝试根据我的需求调整此Google地图距离计算器，但我并不过分熟悉普通的Javascript，只有Jquery。

我正在尝试修改其中一个目标变量，以便从文本框中提取它。通常该行显示：

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>

Answer 1

永远不会调用你的函数setValue。

如果删除它并将以下行放在calculateDistances的开头？

，该怎么办？

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

这对我有用。此外，您不需要解析文本输入。地理编码将字符串转换为纬度/经度坐标。

Javascript，从文本框的内容设置变量

1 个答案: