Question

正如标题所提到的，我正在尝试创建一个地图，该地图呈现单个原点，其中包含为多个目的地（而非航点）呈现的方向。我设法通过大量的重复代码来实现这一目标。但是，我想将代码整合到一个可重用的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>

如何解决错误并显示一个包含一个原点和多个端点的地图？

Answer 1

DirectionsService受配额和费率限制的约束。如果您处理OVER_QUERY_LIMIT案例并退回，则可以检索多条路线。

这样做的几个例子：

1个来源，多个目的地，相同的谷歌地图v3 - 错误消息

1 个答案: