0

我有下一个脚本：

        var directionDisplay;
$( document ).on( "pageinit", "#calc", function() {

    directionsDisplay = new google.maps.DirectionsRenderer();
    var defaultLatLng = new google.maps.LatLng(34.0983425, -118.3267434);  // Default to Hollywood, CA when no geolocation support
    if ( navigator.geolocation ) {
        function success(pos) {
            // Location found, show map with these coordinates
            drawMap(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
        }
        function fail(error) {
            drawMap(defaultLatLng);  // Failed to find location, show default map
        }
        // Find the users current position.  Cache the location for 5 minutes, timeout after 6 seconds
        navigator.geolocation.getCurrentPosition(success, fail, {maximumAge: 500000, enableHighAccuracy:true, timeout: 6000});
    } else {
        drawMap(defaultLatLng);  // No geolocation support, show default map
    }
    function drawMap(latlng) {
        var myOptions = {
            zoom: 10,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            disableDefaultUI: true
        };

        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        // Add an overlay to the map of current lat/lng
        directionsDisplay.setMap(map);
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title: "Greetings!"

        });

    }

});
var directionsService = new google.maps.DirectionsService();

function calcRoute() {
  var start = document.getElementById("start").value;
  var end = document.getElementById("end").value;
  var request = {
    origin:start,
    destination:end,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
  };

  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
      var distanceInput = document.getElementById("distance");
      distanceInput.value = response.routes[0].legs[0].distance.value / 1000;

    }
  });
}

我想计算这两个点之间的公里数，结束是输入值，开始是用户地理位置，我找不到任何在线解决方案。用于路线服务的用户位置的 google api syntx 是什么？我需要前哨将在公里内

4

1 回答 1

1

奥菲尔，

您的第一部分代码非常好。在我使用的示例中，$( document ).on("ready", function() ...而不是您的$( document ).on( "pageinit", "#calc", function()开始，因为我不知道您的 html 结构。

为使其工作所做的更改：我在calcRoute调用时存储初始位置，格式可以由 Directions API 进一步使用：latitude, longitude。它是$("#start").val(latlng.k + ", " + latlng.B);下面的行：

function drawMap(latlng) {
    var myOptions = {
        zoom: 10,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true
    };

    // Log position in start input field
    $("#start").val(latlng.k + ", " + latlng.B);

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    // Add an overlay to the map of current lat/lng
    directionsDisplay.setMap(map);
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title: "Greetings!"
    });
}

然后为了测试，我添加了一个按钮调用calcRoute：

$("#calcBtn").click(function() {
    calcRoute();
});

并添加了错误处理以始终得到响应并知道发生了什么：

directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
        var distanceInput = document.getElementById("distance");
        console.log(response);
        distanceInput.value = response.routes[0].legs[0].distance.value / 1000;
    } else {
        alert("Destination not found, error status: " + status);
    }
});

您可以在 jsfiddle 上对其进行测试：http: //jsfiddle.net/gxjfnmdb/4/

于 2014-09-25T14:30:06.867 回答