正如标题所提到的,我正在尝试创建一个地图,该地图呈现一个单一的起点,并为多个目的地(而不是航路点)呈现方向。我设法通过大量重复代码实现了这一点。但是,我想将代码整合到一个可重用的 javascript 对象中,但遇到了挑战,可能需要对事物进行适当的范围界定?
这是我遇到的错误:
Uncaught TypeError: Cannot call method 'setDirections' of undefined
Javascript代码:
google.maps.event.addDomListener(window, 'load', initialize);
var directionsDisplay;
var map;
var route1 = new route();
var route2 = new route();
var route3 = new route();
var route4 = new route();
function initialize() {
var austin = new google.maps.LatLng(30.2669, -87.7428);
var mapOptions = {
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: austin
}
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
function route() {
this.directionsService = new google.maps.DirectionsService();
this.directionsDisplay = new google.maps.DirectionsRenderer();
this.directionsDisplay.setMap(map);
//alert(JSON.stringify(this.directionsDisplay));
this.calcRoute = calcRoute;
function calcRoute(end) {
if (end === undefined) {
end = "New York";
}
var start = document.getElementById("start").value;
var request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.DRIVING
};
this.directionsService.route(request, function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
alert(JSON.stringify(this.directionsService));
this.directionsDisplay.setDirections(result);
}
});
}
}
HTML 看起来像这样:
<select id="loc1" onchange="route1.calcRoute(getElementById('loc1').value);">
<option value="123 Anywhere lane NY">my Address</option>
如何解决错误并显示具有一个起点和多个终点的地图?