私はここで少し問題を抱えています.Googleマップv3のポイント間に線を引きたいのですが、2ポイントを与えるとOKの応答からステータス結果が得られますが、3ポイント以上を送信すると結果はゼロ、ここにサンプルがあります：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html {
height: 100%
}
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0
}
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var marker;
var firstLat;
var firstLng;
var secondLat;
var secondLng;
var latitude = 31.9565783;
var longitude = 35.945695;
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var amman = new google.maps.LatLng(latitude, longitude);
var myOptions = {
zoom : 10,
center : amman,
mapTypeId : google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
directionsDisplay.setMap(map);
marker = new google.maps.Marker({
position : amman,
map : map,
});
console.log('before mM');
//Here is the line that send the points to the map.
moveMarker(32.024851, 35.877249, 31.56, 35.56, []);
console.log('after mM');
}
function calcRoute(startLat, startLng, endLat, endLng, wayLoc) {
console.log('enter calcRoute');
console.log('startLat' + startLat);
console.log('startLng' + startLng);
console.log('endLat' + endLat);
console.log('endLng' + endLng);
var start = new google.maps.LatLng(startLat, startLng);
// document.getElementById('start').value;
var end = new google.maps.LatLng(endLat, endLng);
// document.getElementById('end').value;
console.log('start if stat');
var waypts = [];
if (wayLoc != null) {
console.log('start for stat');
for ( var i = 0; i < wayLoc.length; i++) {
var pts = [];
console.log(i + '1in for stat');
console.log(wayLoc[i]);
pts = wayLoc[i].split(":");
console.log(i + '2in for stat');
var latPoint = pts[0];
console.log(i + '3in for stat');
var lngPoint = pts[1];
console.log(i + '4in for stat');
var point = new google.maps.LatLng(latPoint, lngPoint);
console.log('point' + point);
console.log(i + '5in for stat');
waypts.push({
location : point,
stopover : true
});
console.log(i + '6in for stat');
console.log(start);
console.log(end);
console.log(waypts);
}
}
console.log('verify req.');
var request = {
origin : start,
destination : end,
waypoints : waypts,
optimizeWaypoints : true,
travelMode : google.maps.DirectionsTravelMode.DRIVING
};
console.log(start);
console.log(end);
console.log(waypts);
console.log('verify DS');
directionsService.route(request, function(response, status) {
console.log('in response');
console.log('status:' + status);
if (status == google.maps.DirectionsStatus.OK) {
console.log('status ok');
console.log(response);
directionsDisplay.setDirections(response);
console.log('set Dir done');
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>';
console.log(summaryPanel.innerHTML);
}
}
//
// if (status == google.maps.DirectionsStatus.INVALID_REQUEST) {
// console.log("INVALID_REQUEST");
// }
// if (status == google.maps.DirectionsStatus.MAX_WAYPOINTS_EXCEEDED) {
// console.log("MAX_WAYPOINTS_EXCEEDED");
// }
// if (status == google.maps.DirectionsStatus.NOT_FOUND) {
// console.log("NOT_FOUND");
// }
// if (status == google.maps.DirectionsStatus.OVER - QUERY_LIMIT) {
// console.log("OVER - QUERY_LIMIT");
// }
// if (status == google.maps.DirectionsStatus.REQUEST_DENIED) {
// console.log("REQUEST_DENIED");
// }
// if (status == google.maps.DirectionsStatus.UNKNOWN_ERROR) {
// console.log("UNKNOWN_ERROR");
// }
// if (status == google.maps.DirectionsStatus.ZERO_RESULTS) {
// console.log("ZERO_RESULTS");
// }
console.log('response is done');
});
console.log('calcRoute is Done');
}
function centerAt(latitude, longitude) {
myLatlng = new google.maps.LatLng(latitude, longitude);
map.panTo(myLatlng);
}
function moveMarker(startLat, startLng, endLat, endLng, wayLoc) {
console.log(startLat);
marker.setPosition(new google.maps.LatLng(startLat, startLng));
map.panTo(new google.maps.LatLng(startLat, startLng));
latitude = latitude;
longitude = longitude;
console.log('wayLoc: ' + wayLoc);
calcRoute(startLat, startLng, endLat, endLng, wayLoc);
};
</script>
<body onload="initialize();">
<div id="map_canvas" style="width: 75%; height: 100%; float: left;"></div>
<div id="control_panel"
style="float: left; width: 25%; text-align: left; padding-top: 20px">
<div id="directions_panel"
style="margin: 20px; background-color: #FFEE77;"></div>
</div>
</body>
</html>
そして、このメソッドを呼び出すと: moveMarker(32.024851, 35.877249, 31.56, 35.56, []); 変更は次のとおりです。
助けてください..