从谷歌距离计算器计算距离然后乘以数字但是

时间:2016-03-16 03:26:53

标签: javascript

如何在将值与数字相乘时删除字符串。由于谷歌距离计算器的字母表,这个代码错误出现为NaN。如何将结果末尾的“km”或“miles”移除到带有数字的倍数,然后在标签上显示该结果

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <table border="0" cellpadding="0" cellspacing="3">
<tr>
    <td colspan="2">
        Source:
        <input type="text" id="txtSource" value="heathrow terminal 5" style="width: 300px" />
        &nbsp; Destination:
        <input type="text" id="txtDestination" value="bath road, tw6" style="width: 300px" />
        <br />
        



        <input type="button" id="calufare" runat="server"  value="Get Route" onclick="GetRoute()"/>
        <hr />
    </td>
</tr>
<tr>
    <td colspan="2">
        <asp:Label ID="dvDistance" runat="server" Text=""></asp:Label> 
        <asp:Label ID="dvDuration" runat="server" Text=""></asp:Label>
        <asp:TextBox ID="rate" runat="server" Text="2.5"></asp:TextBox>
        <asp:Label ID="Fareid" runat="server" Text="Price£  "></asp:Label>

        <script>

            
        </script>
    </td>
</tr>
<tr>
    <td>
        <div id="dvMap" style="width: 1000px; height: 200px">
        </div>
    </td>
    <td>
        <div id="dvPanel" style="width: 500px; height: 200px">
        </div>
    </td>
</tr>
</table>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript">
    var source, destination;
    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    google.maps.event.addDomListener(window, 'load', function () {
        new google.maps.places.SearchBox(document.getElementById('txtSource'));
        new google.maps.places.SearchBox(document.getElementById('txtDestination'));
        directionsDisplay = new google.maps.DirectionsRenderer({ 'draggable': false });
    });

    function GetRoute() {
        var heathrow = new google.maps.LatLng(51.4711620, -0.4523710);
        var mapOptions = {
            zoom: 7,
            center: heathrow
        };
        map = new google.maps.Map(document.getElementById('dvMap'), mapOptions);
        directionsDisplay.setMap(map);
       
        //*               FOR PRICE CALCULATION                         * //
       
  




        //*********DIRECTIONS AND ROUTE**********************//
        source = document.getElementById("txtSource").value;
        destination = document.getElementById("txtDestination").value;

        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 = document.getElementById("dvDistance");
                dvDistance.innerHTML = "";
                dvDistance.innerHTML += "Distance: " + distance + "<br />";
                dvDuration.innerHTML += "Duration:" + duration;
 var distanceMeters = response.rows[0].elements[0].distance.value;

        rate=document.getElementById('Fareid').innerHTML = rate * distanceMeters;

            } else {
                alert("Unable to find the distance via road.");
            }
        });
    }


</script>






























    </div>
    </form>
</body>
</html>

2 个答案:

答案 0 :(得分:0)

 dvDistance = parseInt(document.getElementById('dvDistance').innerHTML);
 var rate = document.getElementById('rate').value;
 document.getElementById('Fareid').innerHTML = rate * dvDistance;

答案 1 :(得分:0)

试试这个 var rate = document.getElementById('rate')。value;

            var distanceMeters = response.rows[0].elements[0].distance.value;

            rate=document.getElementById('Fareid').innerHTML = rate * distanceMeters;