Leaflet结合Mapquest实现路线查询时报TypeError错误如何解决

报错原因 #

• 引入的 mapquest-core.js 为精简核心包，仅提供基础地图渲染能力，不包含路线规划、路线渲染的相关模块，依赖缺失导致属性读取报错
• 调用路线查询方法时未绑定地图实例，获取到的路线数据没有指定渲染目标，不会自动在地图上展示

修复步骤 #

1. 替换MapQuest资源引入：将原有的mapquest-core.js和mapquest-core.css替换为完整功能版本的资源
2. 调用directions.route()时传入当前地图实例作为参数，让路线结果自动渲染到地图上
3. 可删除固定的初始地图中心与缩放配置，路线加载完成后会自动适配边界展示完整路线

完整修复代码 #

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Map Route</title>

    <!-- Leaflet 基础资源 -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
      integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
      crossorigin=""
    />
    <script
      src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
      integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
      crossorigin=""
    ></script>

    <!-- 替换为完整功能的MapQuest资源  -->
    <script src="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.js"></script>
    <link
      type="text/css"
      rel="stylesheet"
      href="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.css"
    />
    <style>
      #map {
        height: 100vh;
        width: 100%;
        position: relative;
      }
      body{
        border: 0px; margin: 0px
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      L.mapquest.key = "HmPt0Wv0aL5Bdx5Dt9U0wGH4mEQWOIG9";
      // 初始化地图
      let map = L.mapquest.map("map", {
          center: [40.730610, -73.935242],
          layers: L.mapquest.tileLayer("map"),
          zoom: 12,
      });
      // 初始化路线服务并查询，传入map参数绑定地图实例
      var directions = L.mapquest.directions();
      directions.route({
          map: map, // 新增绑定地图实例的配置
          start: "350 5th Ave, New York, NY 10118",
          end: "One Liberty Plaza, New York, NY 10006",
          options: {
            timeOverage: 25,
            maxRoutes: 3,
        },
      });
    </script>
  </body>
</html>

注意事项 #

• 示例使用的MapQuest密钥为公开测试密钥，生产环境请替换为自己在MapQuest平台申请的专属密钥
• 若不需要展示多条备选路线，可将maxRoutes参数改为1减少接口请求资源消耗

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