地图多点标记与连线

这个问题是我在做pc项目中遇到的，项目需求是在地图中将车辆的标记点进行连接 项目是由vue来进行编写的下面就是我的效果图

1.首先我们需要启用地图，在我们的入口静态页面head标签中引入

<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=你的key"></script>

2.因为我们在进行vue页面开发过程中是没有window的，所以我就在main.js中封装

import { createApp } from "vue";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import App from "./App.vue";

const app = createApp(App);

app.use(ElementPlus);
app.mount("#app");

window.cb = function (ret) {
  var coords = ret.result.routes[0].polyline,
    pl = [];
  var kr = 1000000;
  for (var i = 2; i < coords.length; i++) {
    coords[i] = Number(coords[i - 2]) + Number(coords[i]) / kr;
  }
  for (var i = 0; i < coords.length; i += 2) {
    pl.push(new TMap.LatLng(coords[i], coords[i + 1]));
  }
  display_polyline(pl);
};
window.display_polyline = function (pl) {
  //创建 MultiPolyline
  var polylineLayer = new TMap.MultiPolyline({
    id: "polyline-layer", //图层唯一标识
    map: map, //设置折线图层显示到哪个地图实例中
    //折线样式定义
    styles: {
      style_blue: new TMap.PolylineStyle({
        color: "#3777FF", //线填充色
        width: 6, //折线宽度
        borderWidth: 5, //边线宽度
        borderColor: "#FFF", //边线颜色
        lineCap: "butt", //线端头方式
      }),
    },
    //折线数据定义
    geometries: [
      {
        //第2条线
        id: "pl",//折线唯一标识，删除时使用
        styleId: "style_blue",//绑定样式名
        paths: [pl],
      },
    ],
  });
};

3.我们所在页面的代码实例

  <div id="mapContainer"></div>
</template>

<script>
import { onMounted } from "@vue/runtime-core";
export default {
  setup() {
    let orderLocationList = [
      { longitude: 116.494243, latitude: 40.043425 },
      { longitude: 116.474696, latitude: 39.963396 },
      { longitude: 116.234956, latitude: 39.90763 },
      { longitude: 116.249904, latitude: 40.030167 },
    ];
    let gpsItem = [];
    let gps = [];

    onMounted(() => {
      //根据获取的已有坐标算出途经点
      let str = "";
      for (var i = 0; i < orderLocationList.length; i++) {
        if (i !== 0 && i !== orderLocationList.length - 1) {
          str += `${orderLocationList[i].latitude},${orderLocationList[i].longitude};`;
          gpsItem.push([
            orderLocationList[i].latitude,
            orderLocationList[i].longitude,
          ]);
        }
      }
      gps = str.substring(0, str.length - 1);
      initMap();
    });

    function initMap() {
      // 根据已有坐标来计算显示地图的中心位置
      let lat =(orderLocationList[orderLocationList.length - 1].latitude - orderLocationList[0].latitude) / 2 + orderLocationList[0].latitude;
      let long =(orderLocationList[orderLocationList.length - 1].longitude - orderLocationList[0].longitude) / 2 + orderLocationList[0].longitude;
      //初始化地图
      window.map = new TMap.Map(document.getElementById("mapContainer"), {
        center: new TMap.LatLng(lat, long), //地图显示中心点,经纬度
        zoom: 10, //缩放级别
        disableDefaultUI: true,
      });
      //起点
      let start = `${orderLocationList[0].latitude},${orderLocationList[0].longitude}`;
      //终点
      let end = `${orderLocationList[orderLocationList.length - 1].latitude},${
        orderLocationList[orderLocationList.length - 1].longitude
      }`;

      // 地图的请求地址
      var url = `https://apis.map.qq.com/ws/direction/v1/driving/?from=${start}&to=${end}&waypoints=${gps}&output=jsonp&callback=cb&key=IVJBZ-PXLCP-GURDR-VROBE-4HQAF-U4FDK`;
      jsonp_request(url);
      var marker = new TMap.MultiMarker({
        id: "marker-layer",
        map: map,
        styles: {
          start: new TMap.MarkerStyle({
            width: 30,
            height: 40,
            anchor: { x: 16, y: 32 },
            src: "https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png",
          }),
          end: new TMap.MarkerStyle({
            width: 30,
            height: 40,
            anchor: { x: 16, y: 32 },
            src: "https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/end.png",
          }),
          default: new TMap.MarkerStyle({
            width: 24,
            height: 32,
            anchor: {
              x: 17,
              y: 21,
            },
          }),
        },
        geometries: [
          {
            //点标注数据数组
            id: "demo",
            styleId: "start",
            position: new TMap.LatLng(
              orderLocationList[0].latitude,
              orderLocationList[0].longitude
            ),
            properties: {
              title: "start",
            },
          },
          {
            //点标注数据数组
            id: "demo1",
            styleId: "end",
            position: new TMap.LatLng(
              orderLocationList[orderLocationList.length - 1].latitude,
              orderLocationList[orderLocationList.length - 1].longitude
            ),
            properties: {
              title: "end",
            },
          },
        ],
      });

      // 途经点连线
      let arr = [];
      gpsItem.forEach((item, index) => {
        arr = [
          ...arr,
          {
            id: "id", //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
            styleId: "myStyle", //指定样式id
            position: new TMap.LatLng(gpsItem[index][0], gpsItem[index][1]), //点标记坐标位置
            properties: {
              //自定义属性
              title: "marker3",
            },
          },
        ];
      });
      // 添加途经点
      marker.add(arr);
    }
    //浏览器调用WebServiceAPI需要通过Jsonp的方式，此处定义了发送JOSNP请求的函数
    function jsonp_request(url) {
      var script = document.createElement("script");
      script.src = url;
      document.body.appendChild(script);
    }
  },
};
</script>

<style>
</style>

已上就是我实现腾讯地图多点连线的全部代码，有什么不足之处，还望大佬们指出