使用PHP/HTML/JavaScript。在绘制的路线中间，如何显示用户给出的两个位置之间的行驶距离？
这是javascript部分
它已经显示了用户给出的两个位置的路线，现在我只想显示路线中间两个位置之间的距离。
var map;
// Center
var center = new google.maps.LatLng(14.537800, 121.001404);
var geocoder = new google.maps.Geocoder();
var infowindow = new google.maps.InfoWindow();
var waypoints;
function init() {
var mapOptions = {
zoom: 13,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
makeRequest('get_locations.php', function(data) {
var data = JSON.parse(data.responseText);
for (var i = 0; i < data.length; i++) {
displayLocation(data[i]);
}
});
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
directionsDisplay.setMap(map);
$("#drawPath").on("click",function() {
var start =$("#origin").val();
var end = $("#destination").val();
drawPath(directionsService, directionsDisplay,start,end);
});
}
function drawPath(directionsService, directionsDisplay,start,end) {
directionsService.route({
origin: start,
destination: end,
optimizeWaypoints: true,
travelMode: $("input[name='travel_mode']:checked"). val()
}, function(response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
} else {
window.alert('Problem in showing direction due to ' + status);
}
});
}
这是用户输入的起始和目的地的PHP/HTML代码
<body onload="init();">
<center>
<br>
<div class="lbl-locations">RIDERS</div>
<div>
<div class="locations-option">
<form class="" action = "" method = "post">
<?php
$conn = new mysqli("localhost","root","","test");
$result = $conn->query("select * from locations ORDER BY id DESC LIMIT 3");
echo "<select name='riderid' id='ride' class='way_points' required>";
echo "<option value='' selected disabled>-Select Rider-</option>";
while ($row = $result->fetch_assoc()) {
$id = $row['id'];
$desc = $row['description'];
echo '<option value="'.$id.'" >'.$desc.'</option> ';
}
?>
</select>
<button class="btn-draw" type="submit" name = "show" >Show</button>
</form>
</div>
<br>
<div class="lbl-locations">Travel Mode :
<input type="radio" name="travel_mode" class="travel_mode" value="WALKING"> WALKING
<input type="radio" name="travel_mode" class="travel_mode" value="DRIVING" checked> DRIVING
</div>
<button class="btn-draw" type="submit" name = "clear" onClick="window.location.href=window.location.href">Clear</button>
<?php
$conn = new mysqli("localhost","root","","test");
If (isset($_POST['show'])) {
$riderid = mysqli_real_escape_string($conn, $_POST['riderid']);
$sql1 = "select * from locations where id='$riderid';";
$result = mysqli_query($conn, $sql1);
$resultCheck = mysqli_num_rows($result);
while ($row = mysqli_fetch_assoc($result)) {
$rname = $row['description'];
$rlocation = $row['name'];
$destination = $row['destination'];
$slati = $row['lat'];
$dlati = $row['dlat'];
$slongi = $row['lon'];
$dlongi = $row['dlong'];
$slocation = $slati.' '.$slongi;
$dlocation = $destination. ' '.$dlati.' '.$dlongi;
$rider = $rname.' ('.$rlocation.')';
}
echo "
<div class='locations-option'>
<input type='hidden' id='origin' name='way_start' class='way_points' placeholder='Start' value='$slocation'>
<input type='text' id='' name='' class='way_points' placeholder='Start' value='$rider' disabled>
<input type='text' id='destination' name='way_end' class='way_points' placeholder='Destination' value='$dlocation'>
</div>
";
unset ($_POST['show']);
} else {
echo "
下面是具体的输入
<div class='locations-option'>
<input type='text' id='origin' name='way_start' class='way_points' placeholder='Start' value=''>
<input type='text' id='destination' name='way_end' class='way_points' placeholder='Destination' value=''>
</div>
";
}
?>
<div class="locations-option">
<input type="button" id="drawPath" value="Draw Path" class="btn-draw" />
</div>
</center>
<br>
<section id="main">
<div id="map_canvas" style="width: 100%; height: 550px;"></div>
</section>
很抱歉代码太乱了，我是新手，所以我真的很感谢你的帮助。
这是结果，我想显示那条路线中间的行驶距离，请帮助我
共有1个答案
只需添加以下代码：您可以从route.legs[i].distance.text中获取距离
(response, status) => {
if (status === "OK" && response) {
directionsRenderer.setDirections(response);
const route = response.routes[0];
const summaryPanel = document.getElementById("directions-panel");
summaryPanel.innerHTML = "";
// For each route, display summary information.
for (let i = 0; i < route.legs.length; i++) {
const routeSegment = i + 1;
summaryPanel.innerHTML +=
"<b>Route Segment: " + routeSegment + "</b><br>";
summaryPanel.innerHTML += route.legs[i].start_address + " to ";
summaryPanel.innerHTML += route.legs[i].end_address + "<br>";
summaryPanel.innerHTML += route.legs[i].distance.text + "<br><br>";
// get your distance here
}
} else {
window.alert("Directions request failed due to " + status);
}
}
此处为Google文档示例
-
问题内容： 我正在使用JMap Viwer在Java中使用OpenStreet Maps http://wiki.openstreetmap.org/wiki/JMapViewer我可以加载地图，一切正常，但是我不知道如何从纬度在两点之间绘制一条线和经度。 任何人都知道画这种线的功能吗？ 谢谢。 问题答案： 该方法对于这个作品，但默默拒绝有少于三个顶点的多边形。对于两点之间的直线，只需重复最后一个
-
我有http://www.codereye.com/2010/10/how-to-calculate-distance-between-2.html的这段代码，它根据两个IP地址对应的纬度和经度计算它们之间的大致物理距离。 lat和long是有符号值。但是，此代码有时会将dist返回为NaN。 我错过什么了吗？θ需要是绝对值吗？ 更新：返回南的测试值：- lat1=-23.5477，lon1=-4
-
问题内容： 嗨，我需要计算具有经度和纬度的两个点之间的距离。 我想避免对外部API的任何调用。 我试图在PHP中实现Haversine公式： 这是代码： 用一些距离公共的给定点进行测试，我没有得到可靠的结果。 我不知道原始公式或实现中是否有错误 问题答案： 不久前，我写了一个haversine公式的示例，并将其发布在我的网站上： ➽请注意，返回的距离与使用参数传入时所用的单位相同。默认值为6371
-
但是这个示例将敲击位置作为源位置和目标位置。但是我需要给出lat/lang值&需要计算这两个位置的距离和时间值。我怎么做呢？谢谢。
-
问题内容： 除了禁止使用经度和纬度值外，我的要求与该问题类似。我想计算两个邮政编码之间的 “步行” 距离。稍后，我还需要查询 “谁在X公里之内？” 我不确定这是否可以实现。是否真的有可能找到两个给定邮政编码之间的距离？ 我不想要仅适用于美国/英国邮政编码的答案。 我需要一个通用的解决方案，该解决方案适用于世界上任何两个邮政编码。 如果无法在不使用经度和经度的情况下计算距离，那么我能否获得给定ZIP
-
问题内容： 突出显示PHP中两个字符串之间的区别的最简单方法是什么？ 我正在考虑“堆栈溢出”编辑历史记录页面的内容，其中新文本为绿色，已删除文本为红色。如果有任何预写的函数或类可用，那将是理想的。 问题答案： 您可以使用PHP Horde_Text_Diff包。它满足您的需求，并且也非常可定制。 它也是根据GPL许可的，所以请尽情享受吧！