1个出处，多个目的地，相同的谷歌地图v3 - 错误消息 [英] 1 origin, multiple destinations, same google map v3 - error message

问题描述

正如标题提到的，我试图创建一个地图，呈现单个来源，并为多个目的地提供路线（而不是路标）。我设法用大量的重复代码实现了这一点。但是，我想将代码整合到一个可重用的JavaScript对象中，但遇到了挑战，可能需要对事物进行适当的范围调整？

以下是我遇到的错误：

  Uncaught TypeError：无法调用未定义的方法'setDirections'
  

Javascript代码：

  google.maps.event.addDomListener（window，'load' ，初始化）; 
 var directionsDisplay; 
 var map; 
 var route1 = new route（）; 
 var route2 = new route（）; 
 var route3 = new route（）; 
 var route4 = new route（）; 
 
函数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）; 
 
 
函数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; 
 
函数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）; 
} 
}）; 
 
 
 $ / code> 

HTML看起来像这样：

 < select id =loc1onchange =route1.calcRoute（getElementById（'loc1'）。value）;> 
< option value =123 Anywhere lane NY>我的地址< / option> 
  

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

解决方案

DirectionsService受制于配额和费率限制。如果您处理OVER_QUERY_LIMIT个案并返回，您可以检索多个路线。

以下几个示例：

• http://www.geocodezip.com/v3_directions_multipleWayPts_CustomMrkrsB.html


• http://www.geocodezip.com/v3_directions_multipleWayPts_CustomMrkrs_busRoute。 html

As the title mentions, I'm trying to create one map that presents a single origin with directions rendered for multiple destinations (not waypoints). I managed to achieve this with tons of duplicate code. However, I want to consolidate the code into one reusable javascript object but having challenges, possibly with proper scoping of things?

Here is the error I encounter:

Uncaught TypeError: Cannot call method 'setDirections' of undefined

Javascript code:

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 looks something like this:

<select id="loc1" onchange="route1.calcRoute(getElementById('loc1').value);">
<option value="123 Anywhere lane NY">my Address</option>

How do I resolve the error and display one map with one origin and multiple endpoints?

解决方案

The DirectionsService is subject to a quota and rate limits. You can retrieve multiple routes if you handle the OVER_QUERY_LIMIT case and back off.

A couple of examples that do that:

• http://www.geocodezip.com/v3_directions_multipleWayPts_CustomMrkrsB.html
• http://www.geocodezip.com/v3_directions_multipleWayPts_CustomMrkrs_busRoute.html

这篇关于1个出处，多个目的地，相同的谷歌地图v3 - 错误消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！