Javascript Jquery谷歌地图用户位置

我有下一个脚本：

        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 for userlocation for directions服务？ 我需要输出将以公里为单位

您的第一部分代码相当不错。在这个示例中，我使用了

$（document）。在（“ready”，function（）…

上，而不是您的

$（document）。在（“pageinit”，“#calc”，function（）

上，开始，因为我不知道您的html结构

为使其工作所做的更改：我在调用

calcRoute

时存储初始位置，其格式可由方向API进一步使用：

纬度、经度

。它是下面的

$（“#开始”）.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);
    }
});

---

您可以在JSFIDLE上测试它：

首先绘制地图，然后获取用户的位置，然后使用

calcRoute

成功回调您的地理位置代码。这样您就可以将用户的位置传递给它。我如何定义原点：LatLng？它给我一个错误“LatLng undefined”.ive更新了我的代码。你能把它复制到JSFIDLE吗？这样我们就不需要在本地复制和粘贴它，我们可以在线测试它！嗨，Ofir，只是为了获得更多细节：输入值是一个文本字段？你需要显示地图，还是只得到距离？你能提供你“calc”的html结构吗page？我假设您使用jQuery mobile就像使用pageinit一样