Jquery谷歌地图用户位置

Jquery Google Maps User location

本文关键字：位置 用户 谷歌地图 Jquery      更新时间：2023-09-26

我有下一个脚本：

        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;
    }
  });
}

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

Ofir，

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

为使其工作所做的更改：我存储调用calcRoute时的初始位置，其格式可以由Directionneneneba 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/

相关文章：