JavaScript传递地址字符串至MapQuest API失败问题排查

你碰到的这个Cannot read property 'length' of undefined错误，根源很明确——你给dir.route()传的是一个字符串，而不是它需要的JavaScript对象。

MapQuest的route()方法需要接收一个包含路由配置的对象（其中必须有locations数组），但你现在把这个配置写成了字符串形式：

var jsmyRouteStops="{locations: ['100 W Atlantic Blvd...', ...]}";

当API尝试解析这个字符串时，它找不到locations属性（因为字符串本身没有这个属性，返回undefined），接着又试图读取undefined的length，自然就抛出了那个错误。

修复步骤 #

只需要把jsmyRouteStops从字符串改成真正的JS对象，去掉外层的引号即可：

<script type="text/javascript" language="JavaScript">
  // 改成真正的JS对象，不要用引号包裹
  var jsmyRouteStops = {
    locations: [
      '100 W Atlantic Blvd Pompano Beach FL, 33060-6099',
      '50 W Atlantic Blvd, BL Pompano Beach FL, 33060-6002',
      '111 N Pompano Beach Blvd, BL Pompano Beach FL, 33062-5703',
      '201 N Ocean Blvd, BL Pompano Beach FL, 33062-5104',
      '501 N Riverside Dr Pompano Beach FL, 33062-4702',
      '2809 NW 2nd St Pompano Beach FL, 33069-2523',
      '3095 N Course Dr Pompano Beach FL, 33069-3300',
      '2600 S Course Dr Pompano Beach FL, 33069-3900',
      '[1401 - 1477] SW 26th Ave Pompano Beach FL, 33069-4315',
      '705 Gardens Dr Pompano Beach FL, 33069-0945'
    ]
  };
  var map, dir;
  map = L.map('map', {
    layers: MQ.mapLayer(),
    center: [26.230735, -80.124932],
    zoom: 15
  });
  dir = MQ.routing.directions();
  // 直接传递对象，不需要trim()（对象没有这个方法）
  dir.route(jsmyRouteStops);
  map.addLayer(MQ.routing.routeLayer({
    directions: dir,
    fitBounds: true
  }));
</script>

额外说明 #

• 去掉trim()：因为现在jsmyRouteStops是对象，不是字符串，调用trim()会引发新的错误，直接传递对象即可。
• 确保地址格式正确：你的地址列表看起来格式没问题，MapQuest应该能正确解析这些地址生成路线。

内容的提问来源于stack exchange，提问作者Clif Maloney