我正在尝试使用Google Maps创建我的第一个脚本。 我必须创建一个在A点和B点之间的路线,中间有某些航路点(A和B将是带有地址的json的第一个和最后一个对象)。 这是我的代码:
<h1>My First Google Map</h1>
<div id="googleMap" style="width:100%;height:400px;"></div>
<script>
var map = null;
var positions = [];
var geocoder = null;
var directionsService;
var directionsDisplay = null;
var json =
[{ "id": "511", "nome": "PERSONA_511", "indirizzo": "VIA DEI COLLI", "civico": "17", "comune": "TERNI", "orario": "07:42:00" }, { "id": "562", "nome": "PERSONA_562", "indirizzo": "VIA DEI COLOMBI", "civico": "45", "comune": "terni", "orario": "07:57:00" }, { "id": "584", "nome": "PERSONA_584", "indirizzo": "VIA MACINAROTTA", "civico": "22", "comune": "TERNI", "orario": "07:47:00" }, { "id": "621", "nome": "PERSONA_621", "indirizzo": "VIA DEL RIVO", "civico": "94", "comune": "TERNI", "orario": "07:55:00" }, { "id": "622", "nome": "PERSONA_622", "indirizzo": "VIA CASELLA ALFREDO", "civico": "33", "comune": "TERNI", "orario": "07:35:00" }, { "id": "626", "nome": "PERSONA_626", "indirizzo": "VIA DEL CAPRIOLO", "civico": "12\/B", "comune": "TERNI", "orario": "08:30:00" }, { "id": "643", "nome": "PERSONA_643", "indirizzo": "VIA DEL FALCO", "civico": "59", "comune": "TERNI", "orario": "08:35:00" }, { "id": "702", "nome": "PERSONA_702", "indirizzo": "VIA PIZZETTI ILDEBRANDO", "civico": "7", "comune": "TERNI", "orario": "07:36:00" }, { "id": "753", "nome": "PERSONA_753", "indirizzo": "VIA DEL POZZO SARACENO", "civico": "13", "comune": "TERNI", "orario": "07:50:00" }, { "id": "780", "nome": "PERSONA_780", "indirizzo": "VIA DELLE CINQUE STRADE", "civico": "41", "comune": "TERNI", "orario": "07:37:00" }, { "id": "781", "nome": "PERSONA_781", "indirizzo": "VIA DELLE CINQUE STRADE", "civico": "41", "comune": "TERNI", "orario": "07:37:00" }, { "id": "786", "nome": "PERSONA_786", "indirizzo": "STRADA DI SANTA MARIA LA ROCCA", "civico": "13", "comune": "TERNI", "orario": "07:41:00" }, { "id": "803", "nome": "PERSONA_803", "indirizzo": "VIA MACINAROTTA", "civico": "60", "comune": "TERNI", "orario": "07:49:00" }, { "id": "805", "nome": "PERSONA_805", "indirizzo": "VIA DEL RIVO", "civico": "26", "comune": "TERNI", "orario": "07:33:00" }, { "id": "1199", "nome": "PERSONA_1199", "indirizzo": "VIA CASELLA ALFREDO", "civico": "23", "comune": "TERNI", "orario": "07:38:00" }, { "id": "1200", "nome": "PERSONA_1200", "indirizzo": "VIA DEL RIVO", "civico": "100", "comune": "TERNI", "orario": "07:58:00" }, { "id": "1322", "nome": "PERSONA_1322", "indirizzo": "STRADA DI PIEDIMONTE", "civico": "33", "comune": "terni", "orario": "08:22:00" }, { "id": "1423", "nome": "PERSONA_1420", "indirizzo": "VIA SCARLATTI DOMENICO", "civico": "12", "comune": "", "orario": "07:55:00" }, { "id": "1954", "nome": "PERSONA_511", "indirizzo": "VIA DEI COLLI", "civico": "17", "comune": "", "orario": "07:48:00" }, { "id": "2004", "nome": "PERSONA_562", "indirizzo": "VIA DEI COLOMBI", "civico": "45", "comune": "", "orario": "08:02:00" }, { "id": "2026", "nome": "PERSONA_584", "indirizzo": "VIA MACINAROTTA", "civico": "22", "comune": "", "orario": "00:00:00" }, { "id": "2061", "nome": "PERSONA_621", "indirizzo": "VIA DEL RIVO", "civico": "94", "comune": "", "orario": "07:58:00" }, { "id": "2062", "nome": "PERSONA_622", "indirizzo": "VIA CASELLA ALFREDO", "civico": "33", "comune": "", "orario": "00:00:00" }, { "id": "2065", "nome": "PERSONA_626", "indirizzo": "VIA DEL CAPRIOLO", "civico": "12\/B", "comune": "", "orario": "00:00:00" }, { "id": "2082", "nome": "PERSONA_643", "indirizzo": "VIA DEL FALCO", "civico": "59", "comune": "", "orario": "08:32:00" }, { "id": "2138", "nome": "PERSONA_702", "indirizzo": "VIA PIZZETTI ILDEBRANDO", "civico": "7", "comune": "", "orario": "07:40:00" }, { "id": "2185", "nome": "PERSONA_753", "indirizzo": "VIA DEL POZZO SARACENO", "civico": "13", "comune": "", "orario": "00:00:00" }, { "id": "2211", "nome": "PERSONA_780", "indirizzo": "VIA DELLE CINQUE STRADE", "civico": "41", "comune": "", "orario": "00:00:00" }, { "id": "2212", "nome": "PERSONA_781", "indirizzo": "VIA DELLE CINQUE STRADE", "civico": "41", "comune": "", "orario": "00:00:00" }, { "id": "2217", "nome": "PERSONA_786", "indirizzo": "STRADA DI SANTA MARIA LA ROCCA", "civico": "13", "comune": "", "orario": "07:45:00" }, { "id": "2234", "nome": "PERSONA_803", "indirizzo": "VIA MACINAROTTA", "civico": "60", "comune": "", "orario": "00:00:00" }, { "id": "2236", "nome": "PERSONA_805", "indirizzo": "VIA DEL RIVO", "civico": "26", "comune": "", "orario": "00:00:00" }, { "id": "2935", "nome": "PERSONA_1540", "indirizzo": "VIA DEL RIVO", "civico": "26", "comune": "", "orario": "07:33:00" }, { "id": "3106", "nome": "PERSONA_1711", "indirizzo": "VIA PONTE LE CAVE", "civico": "14\/F", "comune": "", "orario": "08:45:00" }, { "id": "3185", "nome": "PERSONA_1790", "indirizzo": "VIA TOSCANINI ARTURO", "civico": "18", "comune": "", "orario": "07:42:00" }, { "id": "3257", "nome": "PERSONA_1862", "indirizzo": "VIA COLLE DELL'ORO", "civico": "7", "comune": "", "orario": "08:47:00" }, {
"id": "3258", "nome": "PERSONA_1863",
"indirizzo": "VIA MONTE TOTAGNA", "civico": "87", "comune": "", "orario": "08:50:00"
}, { "id": "3410", "nome": "PERSONA_1199", "indirizzo": "VIA CASELLA ALFREDO", "civico": "23", "comune": "", "orario": "00:00:00" }, { "id": "3411", "nome": "PERSONA_1200", "indirizzo": "VIA DEL RIVO", "civico": "100", "comune": "", "orario": "00:00:00" }, { "id": "3835", "nome": "PERSONA_562", "indirizzo": "VIA DEI COLOMBI", "civico": "45", "comune": "", "orario": "08:03:00" }, { "id": "3853", "nome": "PERSONA_584", "indirizzo": "VIA MACINAROTTA", "civico": "22", "comune": "", "orario": "00:00:00" }, { "id": "3879", "nome": "PERSONA_621", "indirizzo": "VIA DEL RIVO", "civico": "94", "comune": "", "orario": "00:00:00" }, { "id": "3880", "nome": "PERSONA_622", "indirizzo": "VIA CASELLA ALFREDO", "civico": "33", "comune": "", "orario": "00:00:00" }, { "id": "3882", "nome": "PERSONA_626", "indirizzo": "VIA DEL CAPRIOLO", "civico": "12\/B", "comune": "", "orario": "00:00:00" }, { "id": "3892", "nome": "PERSONA_643", "indirizzo": "VIA DEL FALCO", "civico": "59", "comune": "", "orario": "08:30:00" }, { "id": "3935", "nome": "PERSONA_702", "indirizzo": "VIA PIZZETTI ILDEBRANDO", "civico": "7", "comune": "", "orario": "07:40:00" }, { "id": "3963", "nome": "PERSONA_753", "indirizzo": "VIA DEL POZZO SARACENO", "civico": "13", "comune": "", "orario": "00:00:00" }, { "id": "3987", "nome": "PERSONA_779", "indirizzo": "VIA TOSCANINI ARTURO", "civico": "21", "comune": "", "orario": "07:41:00" }, { "id": "3988", "nome": "PERSONA_780", "indirizzo": "VIA DELLE CINQUE STRADE", "civico": "41", "comune": "", "orario": "00:00:00" }, { "id": "3989", "nome": "PERSONA_781", "indirizzo": "VIA DELLE CINQUE STRADE", "civico": "41", "comune": "", "orario": "00:00:00" }, { "id": "3993", "nome": "PERSONA_786", "indirizzo": "STRADA DI SANTA MARIA LA ROCCA", "civico": "13", "comune": "", "orario": "07:45:00" }, { "id": "4005", "nome": "PERSONA_803", "indirizzo": "VIA MACINAROTTA", "civico": "60", "comune": "", "orario": "00:00:00" }, { "id": "4006", "nome": "PERSONA_805", "indirizzo": "VIA DEL RIVO", "civico": "26", "comune": "", "orario": "00:00:00" }, { "id": "4366", "nome": "PERSONA_1327", "indirizzo": "VIA CARNANO", "civico": "26", "comune": "", "orario": "08:57:00" }, { "id": "4508", "nome": "PERSONA_1540", "indirizzo": "VIA DEL RIVO", "civico": "26", "comune": "", "orario": "07:38:00" }, { "id": "4758", "nome": "PERSONA_1863", "indirizzo": "VIA MONTE TOTAGNA", "civico": "87", "comune": "", "orario": "08:55:00" }, { "id": "4865", "nome": "PERSONA_2012", "indirizzo": "VIA DEL TORDO", "civico": "63", "comune": "", "orario": "07:37:00" }, { "id": "4866", "nome": "PERSONA_2013", "indirizzo": "VIALE BATTISTI CESARE", "civico": "167", "comune": "", "orario": "07:30:00" }, { "id": "5042", "nome": "PERSONA_2189", "indirizzo": "VIA TOSCANINI ARTURO", "civico": "21", "comune": "", "orario": "07:41:00" }, { "id": "5145", "nome": "PERSONA_2292", "indirizzo": "VIA MASCAGNI PIETRO", "civico": "7", "comune": "", "orario": "00:00:00" }, { "id": "5155", "nome": "PERSONA_2302", "indirizzo": "VIA DEL FAGGIO", "civico": "33", "comune": "", "orario": "00:00:00" }, { "id": "5271", "nome": "PERSONA_1322", "indirizzo": "STRADA DI PIEDIMONTE", "civico": "33", "comune": "", "orario": "07:38:00" }, { "id": "5275", "nome": "PERSONA_1420", "indirizzo": "VIA SCARLATTI DOMENICO", "civico": "12", "comune": "", "orario": "07:57:00" }, { "id": "5338", "nome": "PERSONA_511", "indirizzo": "VIA DEI COLLI", "civico": "17", "comune": "", "orario": "07:52:00" }, { "id": "5353", "nome": "PERSONA_643", "indirizzo": "VIA DEL FALCO", "civico": "59", "comune": "", "orario": "00:00:00" }, { "id": "5483", "nome": "PERSONA_1597", "indirizzo": "VIA GIOVANNINI GIUSEPPE", "civico": "7", "comune": "", "orario": "07:15:00" }, { "id": "5484", "nome": "PERSONA_1598", "indirizzo": "VIA GIOVANNINI GIUSEPPE", "civico": "7", "comune": "", "orario": "07:15:00" }, { "id": "5507", "nome": "PERSONA_1711", "indirizzo": "VIA PONTE LE CAVE", "civico": "14\/F", "comune": "", "orario": "08:28:00" }, { "id": "5519", "nome": "PERSONA_1790", "indirizzo": "VIA TOSCANINI ARTURO", "civico": "18", "comune": "", "orario": "07:32:00" }, { "id": "5527", "nome": "PERSONA_803", "indirizzo": "VIA MACINAROTTA", "civico": "60", "comune": "", "orario": "00:00:00" }, { "id": "5634", "nome": "PERSONA_1199", "indirizzo": "VIA CASELLA ALFREDO", "civico": "23", "comune": "", "orario": "00:00:00" }, { "id": "5635", "nome": "PERSONA_1200", "indirizzo": "VIA DEL RIVO", "civico": "100", "comune": "", "orario": "00:00:00" }, { "id": "6035", "nome": "PERSONA_584", "indirizzo": "VIA MACINAROTTA", "civico": "22", "comune": "", "orario": "00:00:00" }, { "id": "6057", "nome": "PERSONA_621", "indirizzo": "VIA DEL RIVO", "civico": "94", "comune": "", "orario": "00:00:00" }, { "id": "6058", "nome": "PERSONA_622", "indirizzo": "VIA CASELLA ALFREDO", "civico": "33", "comune": "", "orario": "00:00:00" }, { "id": "6060", "nome": "PERSONA_626", "indirizzo": "VIA DEL CAPRIOLO", "civico": "12\/B", "comune": "", "orario": "00:00:00" }, { "id": "6105", "nome": "PERSONA_702", "indirizzo": "VIA PIZZETTI ILDEBRANDO", "civico": "7", "comune": "", "orario": "07:30:00" }, { "id": "6151", "nome": "PERSONA_780", "indirizzo": "VIA DELLE CINQUE STRADE", "civico": "41", "comune": "", "orario": "07:43:00" }, { "id": "6152", "nome": "PERSONA_781", "indirizzo": "VIA DELLE CINQUE STRADE", "civico": "41", "comune": "", "orario": "07:43:00" }, { "id": "6155", "nome": "PERSONA_786", "indirizzo": "STRADA DI SANTA MARIA LA ROCCA", "civico": "13", "comune": "", "orario": "07:50:00" }, { "id": "6167", "nome": "PERSONA_805", "indirizzo": "VIA DEL RIVO", "civico": "26", "comune": "", "orario": "00:00:00" }, { "id": "6594", "nome": "PERSONA_1540", "indirizzo": "VIA DEL RIVO", "civico": "26", "comune": "", "orario": "00:00:00" }, { "id": "6811", "nome": "PERSONA_1862", "indirizzo": "VIA COLLE DELL'ORO", "civico": "7", "comune": "", "orario": "09:00:00" }, { "id": "6812", "nome": "PERSONA_1863", "indirizzo": "VIA MONTE TOTAGNA", "civico": "87", "comune": "", "orario": "08:55:00" }, { "id": "6818", "nome": "PERSONA_1884", "indirizzo": "STRADA DI PALMETTA", "civico": "32", "comune": "", "orario": "07:47:00" }, { "id": "6907", "nome": "PERSONA_2012", "indirizzo": "VIA DEL TORDO", "civico": "63", "comune": "", "orario": "07:27:00" }, { "id": "6908", "nome": "PERSONA_2013", "indirizzo": "VIALE BATTISTI CESARE", "civico": "167", "comune": "", "orario": "07:20:00" }, { "id": "6950", "nome": "PERSONA_2059", "indirizzo": "VIA DEL GERMANO", "civico": "1", "comune": "", "orario": "07:31:00" }, { "id": "7114", "nome": "PERSONA_2231", "indirizzo": "VIA TOSCANINI ARTURO", "civico": "18", "comune": "", "orario": "07:32:00" }, { "id": "7147", "nome": "PERSONA_2265", "indirizzo": "STRADA DI SAN FORTUNATO", "civico": "31", "comune": "", "orario": "08:36:00" }, { "id": "7171", "nome": "PERSONA_2290", "indirizzo": "VIA PIEMONTE", "civico": "2", "comune": "", "orario": "08:45:00" }, { "id": "7214", "nome": "PERSONA_2337", "indirizzo": "STRADA DI SAN FORTUNATO", "civico": "31", "comune": "", "orario": "08:36:00" }, { "id": "7235", "nome": "PERSONA_2358", "indirizzo": "VIA SCARLATTI DOMENICO", "civico": "12", "comune": "", "orario": "07:57:00" }, { "id": "7238", "nome": "PERSONA_2361", "indirizzo": "VIA COLLE DELL'ORO", "civico": "7", "comune": "", "orario": "09:00:00" }, { "id": "7290", "nome": "PERSONA_2413", "indirizzo": "VIA DELLA CASTELLINA", "civico": "15", "comune": "", "orario": "07:24:00" }, { "id": "7360", "nome": "PERSONA_2483", "indirizzo": "VIA PONTE LE CAVE", "civico": "13\/B", "comune": "", "orario": "08:32:00" }, { "id": "7369", "nome": "PERSONA_2492", "indirizzo": "VIA TOSCANINI ARTURO", "civico": "55", "comune": "", "orario": "07:48:00" }, { "id": "7380", "nome": "PERSONA_2503", "indirizzo": "VIA MONTE TOTAGNA", "civico": "87", "comune": "", "orario": "08:55:00" }, { "id": "7384", "nome": "PERSONA_2507", "indirizzo": "VIA TOSCANINI ARTURO", "civico": "55b", "comune": "", "orario": "07:55:00" }, { "id": "7456", "nome": "PERSONA_2579", "indirizzo": "VIA DEL GERMANO", "civico": "37", "comune": "", "orario": "07:50:00" }, { "id": "7485", "nome": "PERSONA_2608", "indirizzo": "VIA DONIZETTI GAETANO", "civico": "67", "comune": "", "orario": "08:19:00" }, { "id": "7486", "nome": "PERSONA_2609", "indirizzo": "STRADA DI PIEDIMONTE", "civico": "111", "comune": "", "orario": "08:25:00" }, { "id": "7557", "nome": "PERSONA_2680", "indirizzo": "VIALE BATTISTI CESARE", "civico": "167", "comune": "", "orario": "07:20:00" }, { "id": "7562", "nome": "PERSONA_2685", "indirizzo": "VIA DEL POZZO SARACENO", "civico": "45", "comune": "", "orario": "08:20:00" }, { "id": "7582", "nome": "PERSONA_2705", "indirizzo": "VIA DEL CAPRIOLO", "civico": "1", "comune": "", "orario": "08:25:00" }, { "id": "7612", "nome": "PERSONA_2735", "indirizzo": "VIA DEL TORDO", "civico": "63", "comune": "", "orario": "07:27:00" }, { "id": "7613", "nome": "PERSONA_2736", "indirizzo": "VIA DEL TORDO", "civico": "63", "comune": "", "orario": "07:27:00" }, { "id": "7752", "nome": "PERSONA_2875", "indirizzo": "VIA DEL TORDO", "civico": "77", "comune": "", "orario": "00:00:00" }];
function myMap() {
// Instantiate a directions service.
var mapProp = {
center: new google.maps.LatLng(51.508742, -0.120850),
zoom: 5,
apTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
geocoder = new google.maps.Geocoder();
directionsService = new google.maps.DirectionsService;
console.log(directionsService);
// Create a renderer for directions and bind it to the map.
directionsDisplay = new google.maps.DirectionsRenderer({ map: map });
console.log(directionsDisplay);
// Instantiate an info window to hold step text.
var stepDisplay = new google.maps.InfoWindow;
cicloIndirizzi();
}
function cicloIndirizzi() {
for (var i = 0; i < json.length; i++) {
var obj = json[i];
(function (i, obj) {
setTimeout(function (i) {
codeAddress(geocoder, map, obj)
}, i * 1000);
})(i, obj);
}
}
function calculateAndDisplayRoute() {
// Retrieve the start and end locations and create a DirectionsRequest using
// WALKING directions.
console.log("ORIGIN: "+ positions[0]);
console.log("DESTINATION: "+ positions[positions.length - 1]);
var request = {
origin: positions[0],
destination: positions[positions.length - 1],
travelMode: 'WALKING'
}
//waypoints: positions,
//optimizeWaypoints: true,
directionsService.route(function (response, status) {
// Route the directions and pass the response to a function to create
// markers for each step.
if (status === 'OK') {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
function codeAddress(geocoder, map, obj) {
var stringaIndirizzo = obj["indirizzo"];
if (obj["civico"] != "") {
stringaIndirizzo = stringaIndirizzo + ", " + obj["civico"];
}
if (obj["comune"] != "") {
stringaIndirizzo = stringaIndirizzo + ", " + obj["comune"];
}
geocoder.geocode({ 'address': stringaIndirizzo, 'region': 'IT' }, function (results, status) {
if (status === 'OK') {
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
var infowindow = new google.maps.InfoWindow({
content: obj["nome"]
});
//marker.metadata = { type: "point", id: 1 };
marker.addListener('click', function () {
infowindow.open(map, marker);
});
positions.push(marker.position);
console.log(directionsService);
calculateAndDisplayRoute();
console.log("RICERCA...")
} else {
console.log('Geocode was not successful for the following reason: ' + status);
}
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAzmz6WLUQToLaAgy8zu_pud0I59wHTB2M&callback=myMap"></script>
问题是当我尝试调用 directionsService.route()时出现错误:
InvalidValueError:不是对象
我不明白为什么我不能使用directionsService的路线功能,而被困住了。感谢您的关注。