Удалите KM на Google Map расчет расстояния, используя html и javascript

Question

Я в основном хочу удалить KM рядом с номером расстояния, потому что я хочу рассчитать стоимость проезда и не могу сделать какие-либо вычисления. Я надеюсь, что приведенный ниже пример понятен, и, пожалуйста, найдите фрагмент кода для HTML и javascript.

Пример

• Как правило, он пишет как это: 5 км
• и я хочу, чтобы это было так: 5

var source, destination;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();

// initialise the location of the map on Chichester in England (ref lat and lng)
var map = new google.maps.Map(document.getElementById('dvMap'), {
	center: { lat: 50.834697, lng: -0.773792 },
	zoom: 13,
	mapTypeId: 'roadmap'
});

google.maps.event.addDomListener(window, 'load', function () {
	new google.maps.places.SearchBox(document.getElementById('travelfrom'));
	new google.maps.places.SearchBox(document.getElementById('travelto'));
	directionsDisplay = new google.maps.DirectionsRenderer({ 'draggable': true });
});

function GetRoute() {
   
	directionsDisplay.setMap(map);

	source = document.getElementById("travelfrom").value;
	destination = document.getElementById("travelto").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.value;
				var dvDistance = document.getElementById("dvDistance");
				
			var price = document.getElementById("price");

			duration = parseFloat(duration / 60).toFixed(2);
			dvDistance.innerHTML = "";
			dvDistance.innerHTML += "Distance: " + distance + "<br />";
				dvDistance.innerHTML += "Time:" + duration + " min";

			

				price.innerHTML = distance * 2.00;
				

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

<div class="row">
    <div class="col-md-12">
       

        <div>
            <div>
                Travel From : <input id="travelfrom" type="text" name="name" value="Chichester, UK" />
                To : <input id="travelto" type="text" name="name" value="Goodwood aerodrone, UK" />
                <input type="button" value="Get Route" onclick="GetRoute()" />

            </div>
            <br />
            <div>
                <div id="dvDistance">
                </div>
                <br />
                <div id="price">
                </div>
                <br />
                <br />
            </div>

        </div>

        <div id="dvMap" style="min-height:500px"></div>

    </div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk" type="text/javascript"></script>

Answer 1

Текстовое свойство для расстояния - это строка, которая может содержать спецификатор единиц измерения.

Если вам нужно число, используйте свойство значения для расстояния , которое число и всегда в метрах.

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

фрагмент кода:

var source, destination;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();

// initialise the location of the map on Chichester in England (ref lat and lng)
var map = new google.maps.Map(document.getElementById('dvMap'), {
  center: {
    lat: 50.834697,
    lng: -0.773792
  },
  zoom: 13,
  mapTypeId: 'roadmap'
});

google.maps.event.addDomListener(window, 'load', function() {
  new google.maps.places.SearchBox(document.getElementById('travelfrom'));
  new google.maps.places.SearchBox(document.getElementById('travelto'));
  directionsDisplay = new google.maps.DirectionsRenderer({
    'draggable': true
  });
});

function GetRoute() {

  directionsDisplay.setMap(map);

  source = document.getElementById("travelfrom").value;
  destination = document.getElementById("travelto").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.value / 1000;
      var duration = response.rows[0].elements[0].duration.value;
      var dvDistance = document.getElementById("dvDistance");

      var price = document.getElementById("price");

      duration = parseFloat(duration / 60).toFixed(2);
      dvDistance.innerHTML = "";
      dvDistance.innerHTML += "Distance: " + distance + "<br />";
      dvDistance.innerHTML += "Time:" + duration + " min";



      price.innerHTML = distance * 2.00;


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

html,
body {
  height: 100%;
  width: 100%;
}

<div class="row" style="height:100%;">
  <div class="col-md-12" style="height:100%;">
    <div style="height: 130px;">
      <div>
        Travel From : <input id="travelfrom" type="text" name="name" value="Chichester, UK" /> To : <input id="travelto" type="text" name="name" value="Goodwood aerodrone, UK" />
        <input type="button" value="Get Route" onclick="GetRoute()" />

      </div>
      <br />
      <div>
        <div id="dvDistance">
        </div>
        <br />
        <div id="price">
        </div>
        <br />
        <br />
      </div>

    </div>

    <div id="dvMap" style="height:65%;"></div>

  </div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk" type="text/javascript"></script>

Answer 2

Как насчет того, чтобы просто удалить "KM" из строки:

var distance = response.rows[0].elements[0].distance.text.toLowerCase().replace(" km", "");

Если вы хотите производить вычисления с расстоянием, вам также следует изменить тип переменной на Number.

var distance = parseFloat(
    response.rows[0].elements[0].distance.text.toLowerCase().replace(" km", "")
);