Как рассчитать расстояние до объекта от текущего местоположения и отобразить его в тексте?

Мне нужно создать круг вокруг определенного города на карте Google, поэтому я придумал приведенный ниже код, и он отлично работает.

<!DOCTYPE html>
<html>
<style>
body {
  margin: 0;
  padding: 0;
  font: 12px sans-serif;
}
h1, p {
  margin: 0;
  padding: 0;
}
#map_div{
    width:400px;
    height:400px;
    margin: 0 auto;
}
#outer {
    width:400px;
    height:50px;
    margin:0 auto;
    text-align:center;
}
#outer input[type = "text"] {
    display: block;
    margin: 0 auto;
}

</style>
<body>
<script type = "text/javascript" src = "http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>

<div id = "outer">
<input type = "text" name = "location" value = "Current Location"><br>
<div id = "map_div"></div>
</div>

</body>
<script type = "text/javascript">
google.maps.event.addDomListener(window, "load", function () {
    myMap();
});

function myMap() {
    //add global geocoder
    window.geocoder = new google.maps.Geocoder();

  var mapCanvas = document.getElementById("map_div");
  var mapOptions = { zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP, center: new google.maps.LatLng(33.808678, -117.918921) };
  window.map = new google.maps.Map(mapCanvas,mapOptions); 

  drawCircleAroundCity('ottawa');
}

function drawCircleAroundCity(cityName){
    if (!cityName) return;
  if (!window.geocoder) throw "Geocoder is not loaded";

  window.geocoder.geocode({ 'address': cityName }, function (results, status) {
    if (status == 'OK') {
      addCircle(results[0].geometry.location, true);
    } else {
      throw 'Unable to find address: ' + address;
    }
  });
}

function addCircle(position, recenter){
    if (typeof(position) != 'object') return;
  if (!window.map) throw "Map is not loaded";

  var myCity = new google.maps.Circle({
  center: position,
  radius: 50000,
  strokeColor: "#0000FF",
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: "#0000FF",
  fillOpacity: 0.4
  });

  myCity.setMap(window.map);

  if (recenter)
    window.map.setCenter(position);
}
</script>
</html>

Постановка задачи:

Теперь мне нужно определить расстояние до конкретного элемента от текущего местоположения и показать его чуть выше текстового поля Current Location, как показано на этом изображении ниже. Ниже приведены подробные сведения о товаре, в которых указан его адрес. Теперь можем ли мы использовать полный адрес элемента ниже, рассчитать расстояние от Current Location и отобразить его над текстовым полем, показанным точно на изображении ниже? Например this is 187.51 km away from. Я не уверен, как правильно это сделать.

Вот мой рабочий jsfiddle

{
    "country": "canada",
    "state": "ontario",
    "city": "ottawa",
    "street": "riverside drive",
    "number": "1750",
    "postal": "k1g 3t6"
}

Как рассчитать расстояние до объекта от текущего местоположения и отобразить его в тексте?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
78
1

Ответы 1

Используйте API расстояния карты Google, https://developers.google.com/maps/documentation/distance-matrix/start

Другие вопросы по теме