利用google map api计算两地距离

最新推荐文章于 2021-01-14 05:03:51 发布

zlkingdom

最新推荐文章于 2021-01-14 05:03:51 发布

阅读量8.4k

点赞数

分类专栏：代码展示文章标签： google api distance function xhtml html

本文链接：https://blog.csdn.net/zlkingdom/article/details/4613693

版权

代码展示专栏收录该内容

10 篇文章 0 订阅

订阅专栏

因为工作关系正好要在web上实现计算距离的功能,自然就要利用google map的api来实现,经过一段时间的研究终于小有收获.

完整测试代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta name="robots" content="noindex,follow" />
<title>Calculate driving distance with Google Maps API</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA7j_Q-rshuWkc8HyFI4V2HxQYPm-xtd00hTQOC0OXpAMO40FHAxT29dNBGfxqMPq5zwdeiDSHEPL89A" type="text/javascript"></script>

<script type="text/javascript">

var geocoder, location1, location2, gDir;

function initialize() {
  geocoder = new GClientGeocoder();
  gDir = new GDirections();
  GEvent.addListener(gDir, "load", function() {
   var drivingDistanceMiles = gDir.getDistance().meters / 1609.344;
   var drivingDistanceKilometers = gDir.getDistance().meters / 1000;
   document.getElementById('results').innerHTML = '<strong>Address 1: </strong>' + location1.address + ' (' + location1.lat + ':' + location1.lon + ')<br /><strong>Address 2: </strong>' + location2.address + ' (' + location2.lat + ':' + location2.lon + ')<br /><strong>Driving Distance: </strong>' + drivingDistanceMiles + ' miles (or ' + drivingDistanceKilometers + ' kilometers)';
  });
}

function showLocation() {
  geocoder.getLocations(document.forms[0].address1.value, function (response) {
   if (!response || response.Status.code != 200)
   {
    alert("Sorry, we were unable to geocode the first address");
   }
   else
   {
    location1 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
    geocoder.getLocations(document.forms[0].address2.value, function (response) {
     if (!response || response.Status.code != 200)
     {
      alert("Sorry, we were unable to geocode the second address");
     }
     else
     {
      location2 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
      gDir.load('from: ' + location1.address + ' to: ' + location2.address);
     }
    });
   }
  });
}

</script>
</head>

<body οnlοad="initialize()">

<form action="#" οnsubmit="showLocation(); return false;">
  <p>
   <input type="text" name="address1" value="Address 1" />
   <input type="text" name="address2" value="Address 2" />
   <input type="submit" value="Search" />
  </p>
</form>
<p id="results"></p>

</body>
</html>

zlkingdom

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
利用google map api计算两地距离

因为工作关系正好要在web上实现计算距离的功能,自然就要利用google map的api来实现,经过一段时间的研究终于小有收获.完整测试代码如下：http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.w3.org/1999/xhtml"> Calculate driving distance with Google
复制链接

扫一扫