Javascript 如何使用谷歌地图计算距离？_Javascript_Html_Google Maps_Google Maps Api 3

Javascript 如何使用谷歌地图计算距离？

javascript html google-maps google-maps-api-3

Javascript 如何使用谷歌地图计算距离？,javascript,html,google-maps,google-maps-api-3,Javascript,Html,Google Maps,Google Maps Api 3,我需要两个地方之间的距离使用谷歌地图，我已经显示了地图和路线，但我需要的距离，因为我需要显示表中最近的距离，然后是最远的距离。对不起，我的英语不是我的母语这是我的代码： <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1

我需要两个地方之间的距离使用谷歌地图，我已经显示了地图和路线，但我需要的距离，因为我需要显示表中最近的距离，然后是最远的距离。对不起，我的英语不是我的母语

这是我的代码：

    <html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Testing</title>
    <script src="http://maps.google.com/maps/api/js"></script>
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../css/algo.css">
    <script type="text/javascript" >

var map;
var myPos;
var marker;
var directionsRenderer;
var directionsService = new google.maps.DirectionsService();

if (navigator && navigator.geolocation) {
   navigator.geolocation.getCurrentPosition(geoOK, geoKO);
} else {
   geoMaxmind();
}


function geoOK(position) {
showMap(position.coords.latitude, position.coords.longitude);
}


function geoMaxmind() {
showMap(geoip_latitude(), geoip_longitude());
}

function geoKO(err) {
if (err.code == 1) {
error('El usuario ha denegado el permiso para obtener informacion de ubicacion.');
} else if (err.code == 2) {
error('Tu ubicacion no se puede determinar.');
} else if (err.code == 3) {
error('TimeOut.')
} else {
error('Oops!, algo malo pasó.');
}
}

function showMap(lat, longi) {

myPos = new google.maps.LatLng(lat,longi);

var myOptions = {
  zoom: 16,
  center: myPos,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
}

map = new google.maps.Map(document.getElementById("mapa"), myOptions);

marker = new google.maps.Marker({
    position: myPos,
    title:"Su Posición",
    draggable:false,
    animation: google.maps.Animation.DROP
});

marker.setMap(map);

directionsRenderer = new google.maps.DirectionsRenderer();
directionsRenderer.setMap(map);
    travelToAddress();
}

function travelToAddress(){

  //Obtenemos la direccion
  var origen=marker.getPosition();

  destino=document.forms[0].address.value;
  directionsService = new google.maps.DirectionsService();
  // opciones de busqueda
  var request = {
    origin: origen,
    destination: destino,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
};

directionsService.route(request,getRuta);
}

function getRuta(result, status){

    if (status == google.maps.DirectionsStatus.OK) {
       directionsRenderer.setDirections(result);
    } else {
       error("Ha ocurrido un error debido a : " + status);
    }
}


function error(msg) {
alert(msg);
}
</script>
</head>
<body>
    <div class="contenedor">
    <div class="container-fluid">
    <header>

    </header>
    <main>
        <?php
                    $conexion = new buscar(__HOST__,__USUARIODB__,__PASSDB__,__DATABASE__);
                    $datos=$conexion->obtenerDireccion($_GET['algo']);
                    if ($datos != false) {  ?>
        <form>
            <input id="destino" type="text" style="width: 450px" name="address" value="<?php echo $datos['Address']; ?>" />

        </form>
        <?php
            }
        ?>
            <div id="mapa"></div></br></br>

            <a href="../index.php"><button class="btn btn-primary">Buscar de nuevo</button></a>
            <?php echo "<a href='resultados.php?buscar=".$_GET['buscar']."'><button class='btn btn-warning'>Regresar</button></a>"; ?>

    </main>
    </div><!-- cierre del container-fluid -->
    </div><!-- fin del contenedor -->
    <footer>
        <?php require_once("includes/footer.php") ?>
    </footer>


    <script src="../js/jquery-1.12.2.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
</body>
</html>


测试
var映射；
var-myPos；
var标记；
var方向；
var directionsService=new google.maps.directionsService（）；
if（navigator&&navigator.geolocation）{
navigator.geolocation.getCurrentPosition（geoOK，geoKO）；
}否则{
geoMaxmind（）；
}
功能geoOK（位置）{
showMap（position.coords.lation，position.coords.longitude）；
}
函数geoMaxmind（）{
显示地图（地理纬度（），地理经度（）；
}
功能geoKO（err）{
如果（err.code==1）{
错误（'El usuario ha denegado El permiso para obtener informacion de ubicacion'）；
}else if（err.code==2）{
错误（'Tu ubicacion no se puede determinator'）；
}else if（err.code==3）{
错误（'超时'）
}否则{
错误（'Oops！，algo-malo-pasó'）；
}
}
功能显示图（横向、纵向）{
myPos=新的google.maps.LatLng（lat，longi）；
变量myOptions={
缩放：16，
中心:myPos,，
mapTypeId:google.maps.mapTypeId.ROADMAP，
}
map=新的google.maps.map（document.getElementById（“mapa”），myOptions）；
marker=新的google.maps.marker({
职位：myPos，
标题：“Su Posición”，
可拖动：错误，
动画：google.maps.animation.DROP
});
marker.setMap（map）；
directionsRenderer=新的google.maps.directionsRenderer（）；
方向渲染器.setMap（map）；
travelToAddress（）；
}
函数travelToAddress（）{
//拉迪雷西翁酒店
var origen=marker.getPosition（）；
destino=document.forms[0].address.value；
directionsService=new google.maps.directionsService（）；
//布斯奎达酒店
var请求={
产地：奥利金，
目的地：destino，
travelMode:google.maps.Directions travelMode.DRIVING
};
路由（请求，getRuta）；
}
函数getRuta（结果、状态）{
if（status==google.maps.directionstatus.OK）{
directionsRenderer.setDirections（结果）；
}否则{
错误（“Ha ocurrido un error debido a:+状态”）；
}
}
函数错误（msg）{
警报（msg）；
}
结果对象的内部距离值以米为单位（请参见）
对于一次没有航路点的简单旅行，它只是
result.routes[0].legs[0].distance.value

如果你有航路点，你必须对许多航段求和
function getRuta(result, status){

    if (status == google.maps.DirectionsStatus.OK) {
       var tDist = 0;
       var nlegs = result.routes[0].legs.length;
       for (var i = 0; i < nlegs; i++) {
           tDist += result.routes[0].legs[i].distance.value;
       }
       directionsRenderer.setDirections(result);
       alert("distance: "+tDist);

    } else {
       error("Ha ocurrido un error debido a : " + status);
    }
}

函数getRuta（结果、状态）{
if（status==google.maps.directionstatus.OK）{
var-tDist=0；
var nlegs=result.routes[0].legs.length；
对于（var i=0；i