javascript中两个位置之间的距离
Distance between two locations in javascript
有人能帮我这个代码段出了什么问题吗？我的终极目标是使用谷歌javascript API找到两个位置的距离。我使用了地理完成jquery函数来自动完成地址。点击搜索后，什么都没有发生。我只是一个初学者，请帮助
<!DOCTYPE html>
<html>
<head>
<title>Distance between Two Places</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA7j_Q-rshuWkc8HyFI4V2HxQYPm-xtd00hTQOC0OXpAMO40FHAxT29dNBGfxqMPq5zwdeiDSHEPL89A" type="text/javascript"></script>
<script type="text/javascript">
var geocoder, location1, location2;
function initialize() {
geocoder = new GClientGeocoder();
}
function showLocation() {
geocoder.getLocations(document.forms[0].address1.value, function (response) {
if (!response || response.Status.code != 200)
{
alert("Sorry, we were unable to geocode the first address");
}
else
{
location1 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
geocoder.getLocations(document.forms[0].address2.value, function (response) {
if (!response || response.Status.code != 200)
{
alert("Sorry, we were unable to geocode the second address");
}
else
{
location2 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
calculateDistance();
}
});
}
});
}
function calculateDistance()
{
try
{
var glatlng1 = new GLatLng(location1.lat, location1.lon);
var glatlng2 = new GLatLng(location2.lat, location2.lon);
var miledistance = glatlng1.distanceFrom(glatlng2, 3959).toFixed(1);
var kmdistance = (miledistance * 1.609344).toFixed(1);
document.getElementById('results').innerHTML = '<strong>Distance: </strong>' + miledistance + ' miles (or ' + kmdistance + ' kilometers)';
}
catch (error)
{
alert(error);
}
}
</script>
</head>
<body onload="initialize()">
<form action="#" onsubmit="showLocation(); return false;">
<input id="geocomplete" type="text" name="address1" placeholder="Type in an address" size="90" />
<input id="geocomplete1" type="text" name="address2" placeholder="Type in an address" size="90" />
<input type="submit" name="find" value="Search" />
</form>
<p id="results"></p>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../jquery.geocomplete.js"></script>
<script src="logger.js"></script>
<script>
$(function(){
$("#geocomplete").geocomplete()
.bind("geocode:result", function(event, result){
$.log("Result: " + result.formatted_address);
})
.bind("geocode:error", function(event, status){
$.log("ERROR: " + status);
})
.bind("geocode:multiple", function(event, results){
$.log("Multiple: " + results.length + " results found");
});
$("#geocomplete1").geocomplete()
.bind("geocode:result", function(event, result){
$.log("Result: " + result.formatted_address);
})
.bind("geocode:error", function(event, status){
$.log("ERROR: " + status);
})
.bind("geocode:multiple", function(event, results){
$.log("Multiple: " + results.length + " results found");
});
$("#find").click(function(){
$("#geocomplete").trigger("geocode");
});
$("#examples a").click(function(){
$("#geocomplete").val($(this).text()).trigger("geocode");
return false;
});
});
</script>
</body>
</html>
您可以使用谷歌地图的DistanceMatrixService来计算两点之间的距离。
以下函数计算
function calculateDistances() {
origin = document.getElementById('source').value; //Get the source string
destination = document.getElementById('dest').value; //Get the destination string
var service = new google.maps.DistanceMatrixService(); //initialize the distance service
service.getDistanceMatrix(
{
origins: [origin], //set origin, you can specify multiple sources here
destinations: [destination],//set destination, you can specify multiple destinations here
travelMode: google.maps.TravelMode.DRIVING, //set the travelmode
unitSystem: google.maps.UnitSystem.METRIC,//The unit system to use when displaying distance
avoidHighways: false,
avoidTolls: false
}, calcDistance); // here calcDistance is the call back function
}
回调函数calcDistance 的代码
function calcDistance(response, status) {
if (status != google.maps.DistanceMatrixStatus.OK) { // check if there is valid result
alert('Error was: ' + status);
} else {
var origins = response.originAddresses;
var destinations = response.destinationAddresses;
deleteOverlays();
for (var i = 0; i < origins.length; i++) {
var results = response.rows[i].elements;
for (var j = 0; j < results.length; j++) {
alert ('Distance from '+origins[i] + ' to ' + destinations[j]
+ ': ' + results[j].distance.text ); // alert the result
}
}
}
}
你可以在这里找到一个工作演示
调用calculateDistance()时，将location1和location2作为参数
var earthRadius = 6371;
function calculateDistance(posA, posB) {
var lat = posB.lat-posA.lat; // Difference of latitude
var lon = posB.lon-posA.lon; // Difference of longitude
var disLat = (lat*Math.PI*earthRadius)/180; // Vertical distance
var disLon = (lon*Math.PI*earthRadius)/180; // Horizontal distance
var ret = Math.pow(disLat, 2) + Math.pow(disLon, 2);
ret = Math.sqrt(ret); // Total distance (calculated by Pythagore: a^2 + b^2 = c^2)
// Now you have the total distance in the variable ret
}
您也可以简单地使用作为api v3的一部分公开的函数computeDistanceBetween（）。此处提供文档。
该函数以两个latlng作为参数，并以米为单位返回两者之间的距离。
将其添加到JavaScript:的开始
google.maps.LatLng.prototype.distanceFrom = function(latlng) {
var lat = [this.lat(), latlng.lat()]
var lng = [this.lng(), latlng.lng()]
var R = 6378137;
var dLat = (lat[1]-lat[0]) * Math.PI / 180;
var dLng = (lng[1]-lng[0]) * Math.PI / 180;
var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.cos(lat[0] * Math.PI / 180 ) * Math.cos(lat[1] * Math.PI / 180 ) *
Math.sin(dLng/2) * Math.sin(dLng/2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
var d = R * c;
return Math.round(d);
}
然后像这样使用function：
var loc1 = new GLatLng(52.5773139, 1.3712427);
var loc2 = new GLatLng(52.4788314, 1.7577444);
var dist = loc2.distanceFrom(loc1);
alert(dist/1000);
相关文章：
- UI 路由器 - 在状态之间转换时记住滚动位置
- javascript中两个位置之间的距离
- Three.js-查找鼠标最后位置和当前位置之间的所有交点
- jQuery/CSS在幻灯片之间的转换扰乱了位置:修复了幻灯片内部的性能
- 仅使用 CSS 即可在位置之间制作动画
- 获取两个位置之间的距离和时间的功能
- 两个位置之间的距离 - 谷歌地图
- Parse.com云代码，计算两个位置之间的行驶距离
- 绘制两个位置之间的单元格
- 获取@和文本区域当前位置之间的出现次数
- 滚动时在两个预设位置之间移动对象
- 谷歌位置Api找到附近的位置与当前位置和附近位置之间的距离排序
- 计算两个位置之间的距离谷歌地图Api
- 使用Google Maps API V3计算当前位置和不同位置之间的距离
- 如何找到窗口顶部位置和我的iframe开始位置之间的距离
- 在HTML地图上绘制两个位置之间的路线
- 通过提供源和目标 .NET 或 JavaScript 的纬度和经度来计算两个位置之间的道路距离
- 使用 html5 测量特定位置和当前位置之间的距离
- Google Maps JavaScript API v3 在两个位置之间绘制线条
- 如何在新旧目标位置之间平滑地平移
