Re: [問題]google api 多點距離
小弟 改了範例之後 ,解決了小部分的問題
目前最困擾的是,可以計算出多點之間的距離,但是
該如何才能將各點距離加總呢?
route.legs[i].distance.text 現在得到的距離都是這個樣子
懇請大大們幫幫忙
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Google Maps JavaScript API v3 Example: Directions Waypoints</title>
<link href="/maps/documentation/javascript/examples/default.css"
rel="stylesheet">
<script
src="" rel="nofollow">https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var taipei = new google.maps.LatLng(25.098969,121.559944);
var mapOptions = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: taipei
}
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
directionsDisplay.setMap(map);
}
function calcRoute() {
var waypts = [];
waypts.push({
stopover:true});
var request = {
origin: new google.maps.LatLng(25.058470, 121.554901),
destination: new google.maps.LatLng(25.058059, 121.555489),
waypoints: [{location: "Taipei"},{location:
"24.306636,120.930176"}],
optimizeWaypoints: true,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var route = response.routes[0];
var summaryPanel = document.getElementById('directions_panel');
summaryPanel.innerHTML = '';
// For each route, display summary information.
for (var i = 0; i < route.legs.length; i++) {
var 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>';
}
}
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="float:left;width:70%;height:100%;"></div>
<div id="control_panel"
style="float:right;width:30%;text-align:left;padding-top:20px">
<div style="margin:20px;border-width:2px;">
<br>
<br>
<input type="submit" onclick="calcRoute();">
</div>
<div id="directions_panel"
style="margin:20px;background-color:#FFEE77;"></div>
</div>
</body>
</html>
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 140.138.152.14
推
01/24 16:51, , 1F
01/24 16:51, 1F
→
01/24 16:52, , 2F
01/24 16:52, 2F
→
01/24 18:30, , 3F
01/24 18:30, 3F
討論串 (同標題文章)
完整討論串 (本文為第 2 之 2 篇)：
Ajax 近期熱門文章
PTT數位生活區 即時熱門文章
