展示：

代码：

<template>
  <view class="container">
    <view id="mapDiv" style="width: 100%; height: 100%;"></view>
  </view>
</template>

<script>
import config from '@/config.js';

export default {
  data() {
    return {
      startLngLat: null,
      endLngLat: null,
      transitRoute: null,
      map: null,
      zoom: 12, // 地图级别
      startIcon: "http://lbs.tianditu.gov.cn/images/bus/start.png", // 起点图标
      endIcon: "http://lbs.tianditu.gov.cn/images/bus/end.png", // 终点图标
      map_bus: "http://lbs.tianditu.gov.cn/images/bus/map_bus.png",
      map_metro: "http://lbs.tianditu.gov.cn/images/bus/map_metro.png"
    };
  },
  onReady() {
    this.loadJQuery();
  },
  methods: {
    loadJQuery() {
      // 动态创建脚本标签加载 jQuery
      const script = document.createElement('script');
      script.src = "http://lbs.tianditu.gov.cn/js/lib/jquery/jquery-1.7.2.min.js";
      script.onload = this.initMap; // jQuery 加载完后初始化地图
      document.body.appendChild(script);
    },
    initMap() {
      // 引入天地图API脚本
      const script = document.createElement('script');
      script.src = `http://api.tianditu.gov.cn/api?v=4.0&tk=${config.tiandimap_key}`;
      script.onload = this.onMapLoad;
      document.body.appendChild(script);
    },
    onMapLoad() {
      this.map = new T.Map('mapDiv');
      this.map.centerAndZoom(new T.LngLat(116.40969, 39.90945), this.zoom); // 初始化地图中心点和缩放级别
      const config = {
        policy: 1, // 公交导航的策略参数
        onSearchComplete: this.busSearchResult // 检索完成后的回调函数
      };
      this.transitRoute = new T.TransitRoute(this.map, config);
      this.searchBus();
    },
    searchBus() {
      this.map.clearOverLays();
      this.startLngLat = new T.LngLat(116.33297, 39.99932); // 起点经纬度
      this.endLngLat = new T.LngLat(116.36181, 39.86875); // 终点经纬度
      this.transitRoute.search(this.startLngLat, this.endLngLat);
	  
	  
	  var pointArray = new Array(); //让所有点在视野范围内1
	  pointArray[0] = new T.LngLat(116.33297, 39.99932); //让所有点在视野范围内2 注意数组[]中设置不同的ID
	  pointArray[1] = new T.LngLat(116.36181, 39.86875); //让所有点在视野范围内2 注意数组[]中设置不同的ID
	  this.map.setViewport(pointArray); //让所有点在视野范围内3
    },
    busSearchResult(result) {
      if (this.transitRoute.getStatus() === 0) {
        this.createStartMarker();
        const plans = result.getNumPlans();
        for (let i = 0; i < plans; i++) {
          const plan = result.getPlan(i);
          this.map.clearOverLays();
          this.createStartMarker();
          this.createSegments(plan);
          if (i === 0) {
            this.createSegments(result.getPlan(0));
          }
        }
      } else {
        alert(this.errorCodeMsg(this.transitRoute.getStatus()));
      }
    },
    createSegments(plan) {
      const segmentNum = plan.getNumSegments();
      for (let m = 0; m < segmentNum; m++) {
        const line = plan.getDetails(m);
        const segmentLine = line.getSegmentLine()[0];
        this.createRoute(segmentLine.linePoint, line.getSegmentType(), line.getStationStart().lonlat, line.getStationEnd().lonlat);
        this.createMarker(line.getStationStart().lonlat, line.getStationEnd().lonlat, line.getSegmentType());
      }
    },
    createMarker(lnglatStartStr, lnglatEndStr, type) {
      let icon1;
      if (type === 2) {
        icon1 = new T.Icon({
          iconUrl: this.map_bus,
          iconSize: new T.Point(23, 23),
          iconAnchor: new T.Point(12, 12)
        });
      } else if (type === 3) {
        icon1 = new T.Icon({
          iconUrl: this.map_metro,
          iconSize: new T.Point(23, 23),
          iconAnchor: new T.Point(12, 12)
        });
      } else {
        icon1 = new T.Icon({
          iconUrl: this.map_metro,
          iconSize: new T.Point(23, 23),
          iconAnchor: new T.Point(12, 12)
        });
      }

      if (type !== 1) {
        const lnglatStartArr = lnglatStartStr.split(",");
        const lnglatStart = new T.LngLat(lnglatStartArr[0], lnglatStartArr[1]);
        const lnglatEndArr = lnglatEndStr.split(",");
        const lnglatEnd = new T.LngLat(lnglatEndArr[0], lnglatEndArr[1]);
        const startMarker = new T.Marker(lnglatStart, { icon: icon1 });
        this.map.addOverLay(startMarker);
        const endMarker = new T.Marker(lnglatEnd, { icon: icon1 });
        this.map.addOverLay(endMarker);
      }
    },
    createRoute(pointsStr, type, lnglatStartStr, lnglatEndStr) {
      const points = pointsStr.substring(0, pointsStr.length - 1).split(";");
      const lnglatArr = points.map(point => {
        const [lng, lat] = point.split(",");
        return new T.LngLat(lng, lat);
      });

      let lineColor, lineStyle;
      if (type === 1) {
        lineColor = "#2E9531"; // 步行
        lineStyle = "dashed";
      } else if (type === 2) { // 公交
        lineColor = "#2C64A7";
        lineStyle = "solid";
      } else if (type === 3) { // 地铁
        lineColor = "#2C64A7";
        lineStyle = "solid";
      } else { // 地铁站内换乘
        lineColor = "#2E9531";
        lineStyle = "dashed";
      }

      const line = new T.Polyline(lnglatArr, {
        color: lineColor,
        weight: 4,
        opacity: 1,
        lineStyle: lineStyle
      });
      this.map.addOverLay(line);
    },
    createStartMarker() {
      const iconStart = new T.Icon({
        iconUrl: this.startIcon,
        iconSize: new T.Point(44, 34),
        iconAnchor: new T.Point(12, 31)
      });
      const startMarker = new T.Marker(this.startLngLat, { icon: iconStart });
      this.map.addOverLay(startMarker);

      const iconEnd = new T.Icon({
        iconUrl: this.endIcon,
        iconSize: new T.Point(44, 34),
        iconAnchor: new T.Point(12, 31)
      });
      const endMarker = new T.Marker(this.endLngLat, { icon: iconEnd });
      this.map.addOverLay(endMarker);
    },
    errorCodeMsg(code) {
      const messages = {
        1: '找不到起点',
        2: '找不到终点',
        3: '规划不出线路',
        4: '起终点距离200米以内，不返回线路',
        5: '起终点距离500米内，返回线路',
        6: '输入参数错误'
      };
      return messages[code] || '';
    }
  }
};
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  flex-direction: column;
}
.description {
  margin-top: 10px;
  font-size: 14px;
  text-align: center;
}
</style>
``

解释：