使用 html 和 javascript 移除 google 地图距离计算中的 KM

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

如何从字符串中删除 "KM"：

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

如果你想用距离来计算，你也应该把变量的类型改为数字。

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

Answer 2

text property of distance 是一个可以包含单位说明符的字符串。

如果您想要一个数字，请使用 value property of distance，它是一个数字，始终以米为单位。

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>

使用 html 和 javascript 移除 google 地图距离计算中的 KM

Remove KM on google map distance calculation using html and javascript

html

javascript

google-maps

google-api

google-maps-api-3