使用Vue在地图上显示路线

mounted() {
  // 引入地图SDK
  const script = document.createElement('script');
  script.src = 'https://map.qq.com/api/js?v=2.exp&key=YOUR_MAP_KEY';
  script.onload = () => {
    // 初始化地图
    this.initMap();
  };
  document.head.appendChild(script);
},
methods: {
  initMap() {
    // 创建地图实例
    const map = new qq.maps.Map(document.getElementById('map'), {
      center: new qq.maps.LatLng(39.916527, 116.397128), // 地图中心点坐标
      zoom: 13 // 地图缩放级别
    });
    // 其他地图操作，如添加标记点、绘制路线等
  }
}

initMap() {
  // 创建地图实例
  const map = new qq.maps.Map(document.getElementById('map'), {
    center: new qq.maps.LatLng(39.916527, 116.397128), // 地图中心点坐标
    zoom: 13 // 地图缩放级别
  });
  
  // 绘制折线路线
  const path = [
    new qq.maps.LatLng(39.916527, 116.397128), // 起点坐标
    new qq.maps.LatLng(39.908749, 116.397128), // 途经点坐标
    new qq.maps.LatLng(39.908749, 116.407128), // 途经点坐标
    new qq.maps.LatLng(39.916527, 116.407128) // 终点坐标
  ];
  const polyline = new qq.maps.Polyline({
    path: path,
    strokeColor: '#FF0000', // 路线颜色
    strokeWeight: 5, // 路线宽度
    map: map // 地图实例
  });
}

<template>
  <div>
    <div id="map" style="width: 100%; height: 400px;"></div>
  </div>
</template>