Question

我需要计算和打印从当前位置到给定目的地的距离。根据我的理解，我可以通过谷歌地图api实现这一目标。

所以，我必须只传递目的地位置，api将是地图以及距离。

为此我已在google上配置并获得以下链接，我无法理解如何使用此功能，但在下面的网址中我传递了源和目的地，但我不想通过来源，应将当前位置作为来源。

是否可以在网页上打印距离？

https://maps.googleapis.com/maps/api/directions/json?origin=kanpur&destination=lucknow&key=%20AIzaSyCeBdq7rr-R7w7vZCXscLWgEDb3oO9CUhw

Answer 1

看起来你正在寻找一个Directions service，但从那时起：

但是我不想传递源，它应该是最新的位置作为来源。

下面的

已提供Directions service页面中的已修改示例，演示如何指定路线服务的当前位置

function initMap() {
    var directionsService = new google.maps.DirectionsService;
    var directionsDisplay = new google.maps.DirectionsRenderer;
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 7,
        center: { lat: 41.85, lng: -87.65 }
    });
    directionsDisplay.setMap(map);

    var printRoute = function () {
        calculateAndDisplayRoute(directionsService, directionsDisplay);
    };

    getCurrentLocation(function (loc) {
        if (loc != null) {
            document.getElementById('startInner').value = loc.toString();
            document.getElementById('start').innerHTML = 'Current location';
            map.setCenter(loc);
        }
        else {
            document.getElementById('start').innerHTML = 'Current location not found';
            document.getElementById('btnCalc').disabled = true;
        }  
    });

    document.getElementById('btnCalc').addEventListener('click', printRoute);
}

function calculateAndDisplayRoute(directionsService, directionsDisplay) {
    directionsService.route({
        origin: document.getElementById('startInner').value,
        destination: document.getElementById('end').value,
        travelMode: google.maps.TravelMode.DRIVING
    }, function (response, status) {
        if (status === google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        } else {
            window.alert('Directions request failed due to ' + status);
        }
    });
}


function getCurrentLocation(complete) {  
    // Try W3C Geolocation (Preferred)
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            var location = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
            complete(location);
        }, function () {
            complete(null);
        });
    }
    else {
        complete(null);
    }
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#map {
    height: 100%;
}

#floating-panel {
    position: absolute;
    top: 10px;
    left: 25%;
    z-index: 5;
    background-color: #fff;
    padding: 5px;
    border: 1px solid #999;
    text-align: center;
    font-family: 'Roboto','sans-serif';
    line-height: 30px;
    padding-left: 10px;
}

<div id="floating-panel">
        <b>Start: </b>
        <span id="start">Current Location</span>
        <b>End: </b>
        <input id="end" type="text" ></input>
        <input id="startInner" type="hidden"></input>
        <button id="btnCalc">Print route</button>
    </div>
    <div id="map"></div>
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
            async defer></script>

JSFiddle

Answer 2

以下是如何执行此操作的示例：

代码：

var p1 = new google.maps.LatLng(20, 9.4);
var p2 = new google.maps.LatLng(60.23, 9.7);

function distanceTwoPoints(p3, p4){
  return (google.maps.geometry.spherical.computeDistanceBetween(p3, p4) / 1000); //dividing by 1000 to get Kilometers
}
alert(distanceTwoPoints(p1, p2));

小提琴示例（已更新）：https://jsfiddle.net/wexd3spp/12/

如果您想在页面上打印，我建议使用标准输出方法：

document.getElementById("demo").innerHTML = distanceTwoPoints(p1,p2)+" Km";

以下是文档中所说的内容：

两点之间的距离是最短路径的长度它们之间。这条最短路径称为测地线。在一个球体上测地线是一个大圆圈的一部分。要计算这个距离，调用computeDistanceBetween（），传递两个LatLng对象。

使用google map api

2 个答案: