複数のウェイポイントを含むグーグルマップでルートを作成する必要がありますが、グーグルのAPIはルートに23を超えるウェイポイントを許可していません。マーカーを追加し、ポリラインを使用してマーカー間にルートを描画するためにコーディングされたソリューションとして。コードは完璧に機能しましたが、ある時点でルートの半分を生成するのをやめました。これがGoogleマップの制限であるかどうか誰かが知っていますか？ソースコード：
<html><head><meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="PolylineEncoder.js"></script>
<script type="text/javascript">
var geocoder;
var directionsService = new google.maps.DirectionsService();
var map;
var trafficLayer;
var bikeLayer;
var poly;
var LocationsMarkers = [];
var Employees =[];
var latlngCenter;
function GetMarkers(){
for (var i = 0; i < Employees.length; i++) {
var Employee = Employees[i];
var myLatLng = new google.maps.LatLng(Employee[1], Employee[2]);
// Add the location to vector for routing
LocationsMarkers.push(new google.maps.LatLng(Employee[1], Employee[2]));
// Add a marker
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: Employee[0],
zIndex: Employee[3]
});
}
// If the length of LocationMarkers > 1, i'm get the routes and i create the polyline.
if (LocationsMarkers.length > 1){
var polyOptions = {
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 3
}
poly = new google.maps.Polyline(polyOptions);
poly.setMap(map);
for (var a = 0; a < LocationsMarkers.length; a++) {
calcRoute(LocationsMarkers[a], LocationsMarkers[a+1]);
}
}
}
// calculate the route on the markers.
function calcRoute(start, end) {
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.WALKING
};
var path = poly.getPath();
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
for (var i = 0; i < response.routes.length; i++) {
for (var i2 = 0; i2 < response.routes[i].legs.length; i2++) {
for (var i3 = 0; i3 < response.routes[i].legs[i2].steps.length; i3++) {
// add the start and end location by the legs of routes on the path to the polyline
path.push(response.routes[i].legs[i2].steps[i3].start_location);
path.push(response.routes[i].legs[i2].steps[i3].end_location);
}
}
}
}
});
}
function TrafficOn() { trafficLayer.setMap(map); }
function TrafficOff() { trafficLayer.setMap(null); }
function BicyclingOn() { bikeLayer.setMap(map); }
function BicyclingOff() { bikeLayer.setMap(null);}
function StreetViewOn() { map.set("streetViewControl", true); }
function StreetViewOff() { map.set("streetViewControl", false); }
function initialize() {
geocoder = new google.maps.Geocoder();
CollectData();
var myOptions = {
zoom: 18,
center: latlngCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
trafficLayer = new google.maps.TrafficLayer();
bikeLayer = new google.maps.BicyclingLayer();
GetMarkers();
}
function CollectData(){
// In this example I used only 20 markers, but there will be situations where I have to show more than 50.
Employees = [["1",-20.14669,-44.888862 , 1],
["2",-20.1454,-44.892467 , 2],
["3",-20.14403,-44.890579 , 3],
["4",-20.142741,-44.886716 , 4],
["5",-20.143668,-44.885922 ,5],
["6",-20.14256,-44.885579 ,6],
["7",-20.141512,-44.885879 ,7],
["8",-20.140465,-44.885997 ,8],
["9",-20.138722,-44.88545 ,9],
["10",-20.137886,-44.887071,10],
["11",-20.137201,-44.891106,11],
["12",-20.137483,-44.892157,12],
["13",-20.138047,-44.893251,13],
["14",-20.138631,-44.894303,14],
["15",-20.139296,-44.895311,15],
["16",-20.138208,-44.895204,16],
["17",-20.136476,-44.895569,17],
["18",-20.137765,-44.897049,18],
["19",-20.138067,-44.899238,19],
["20",-20.138994,-44.900461,20] ];
latlngCenter = new google.maps.LatLng(Employees[0][1],Employees[0][2]);
}
</script></head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%">
</div>
</body>
</html>
