jQuery的谷歌地图用户位置

我的下一个脚本：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; 

    } 
    }); 
}

我要计算这个2点之间公里的，年底将输入值和开始将用户gelocation，我不能找到任何在线解决方案。什么是用于位置服务的userlocation的google api合成语音？我需要outpot将成为公里的

来源

2014-09-25 Ofir Ohayon

先绘制您的地图，然后获取用户的位置，然后使用'calcRoute'来成功回调您的地理位置代码。这样你可以将它传递给用户的位置。 – Andy 2014-09-25 11:10:07

我如何定义原点：LatLng？它给我一个错误“LatLng undefined”。 – 2014-09-25 11:35:56

我更新了我的代码。 – 2014-09-25 11:36:46

奥菲尔，

你的代码的第一部分是相当不错的。在示例中，我使用$(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-25 14:30:06

jQuery的谷歌地图用户位置

回答

相关问题