wangluohuoyun-htqd/src/components/mapdrag/indexMap.vue

<template>
  <div class="positionBox">
    <div id="allmap"></div>
  </div>
</template>
<script>
import { travelpath } from "@/api/orderManagement";
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
  name: "app",
  data() {
    return {
      map: null,
      path: [],
      path1: [
        [116.405289, 39.904987],
        [113.964458, 40.54664],
        [111.47836, 41.135964],
        [108.949297, 41.670904],
        [106.380111, 42.149509],
        [103.774185, 42.56996],
        [101.135432, 42.930601],
        [98.46826, 43.229964],
        [95.777529, 43.466798],
        [93.068486, 43.64009],
        [90.34669, 43.749086],
        [87.61792, 43.793308],
      ],
      path2: [
        [117.405289, 40.904987],
        [114.964458, 41.54664],
        [112.47836, 42.135964],
        [109.949297, 43.670904],
        [107.380111, 44.149509],
        [104.774185, 43.56996],
        [102.135432, 43.930601],
        [99.46826, 44.229964],
        [96.777529, 44.466798],
        [94.068486, 44.64009],
        [91.34669, 44.749086],
        [88.61792, 44.793308],
      ],
    };
  },
  props: ["radio", "orderid"],
  watch: {
    radio: function (val1, val2) {
      debugger;
      if (val1 == 1) {
        var that = this;
        travelpath({ orderId: that.orderid })
          .then((response) => {
            that.path1 = [];
            var patharr = JSON.parse(response.data.longitudeLatitude);
            // console.log(JSON.parse(response.data.longitudeLatitude),11111111)
            for (let i = 0; i < patharr.length; i++) {
              that.path1.push([patharr[i].longitude, patharr[i].latitude]);
            }
            that.path = that.path1;
            that.loadmap();
          })
          .catch(() => {
            // console.log(121212)
          });
        // this.path = this.path1
      } else {
        var that = this;
        travelpath({ orderId: that.orderid })
          .then((response) => {
            that.path2 = [];
            var patharr = JSON.parse(response.data.longitudeLatitude);
            // console.log(JSON.parse(response.data.longitudeLatitude),11111111)
            for (let i = 0; i < patharr.length; i++) {
              that.path2.push([patharr[i].longitude, patharr[i].latitude]);
            }
            that.path = that.path2;
            that.loadmap();
          })
          .catch(() => {
            // console.log(121212)
          });
        // travelpath({orderId:this.orderid}).then(response => {
        //   console.log(response)
        // })
        // .catch(() => {
        // })
        // this.path = this.path2
      }
      // this.loadmap();
    },
  },
  methods: {
    loadmap() {
      return new Promise((reslove, reject) => {
        AMapLoader.load({
          key: "211dd6f989e719022aaf47ddb0659c47", // 申请好的Web端开发者Key，首次调用 load 时必填
          // version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          plugins: ["AMap.ToolBar", "AMap.Scale", "AMap.Geocoder"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
          AMapUI: {
            // 是否加载 AMapUI，缺省不加载
            version: "1.1", // AMapUI 缺省 1.1
            plugins: [], // 需要加载的 AMapUI ui插件
          },
        })
          .then((AMap) => {
            this.map = new AMap.Map("allmap", {
              resizeEnable: true,
              zoom: 10,
              // center: [116.397428, 39.90923] //中心点坐标
            });

            //地图控件
            this.map.addControl(new AMap.Scale());
            this.map.addControl(new AMap.ToolBar());
            this.map.setZoom(14); //设置缩放大小
            this.trajectory();
            reslove();
          })
          .catch((e) => {
            console.log(e, "高德地图加载失败");
            reject(e);
          });
      });
    },
    // 轨迹
    trajectory() {
      AMapUI.load(["ui/misc/PathSimplifier", "lib/$"], (PathSimplifier, $) => {
        if (!PathSimplifier.supportCanvas) {
          alert("当前环境不支持 Canvas！");
          return;
        }

        let pathSimplifierIns = new PathSimplifier({
          zIndex: 100,
          //autoSetFitView:false,
          map: this.map, //所属的地图实例

          getPath: function (pathData, pathIndex) {
            return pathData.path;
          },
          getHoverTitle: function (pathData, pathIndex, pointIndex) {
            if (pointIndex >= 0) {
              //point
              return (
                pathData.name +
                "，点：" +
                pointIndex +
                "/" +
                pathData.path.length
              );
            }

            return pathData.name + "，点数量" + pathData.path.length;
          },
          renderOptions: {
            renderAllPointsIfNumberBelow: 100, //绘制路线节点，如不需要可设置为-1
          },
        });

        window.pathSimplifierIns = pathSimplifierIns;

        //设置数据
        pathSimplifierIns.setData([
          {
            name: "路线0",
            path: this.path,
          },
        ]);

        //对第一条线路（即索引 0）创建一个巡航器
        let trajectory = pathSimplifierIns.createPathNavigator(0, {
          loop: true, //循环播放
          speed: 100, //巡航速度，单位千米/小时
        });

        trajectory.start();
      });
    },
  },
  mounted() {
    var that = this;
    // console.log(this.orderid)
    this.$nextTick(function () {
      travelpath({ orderId: that.orderid })
        .then((response) => {
          that.path1 = [];
          if (response.data) {
            var patharr = JSON.parse(response.data.longitudeLatitude);
            // console.log(JSON.parse(response.data.longitudeLatitude),11111111)
            for (let i = 0; i < patharr.length; i++) {
              that.path1.push([patharr[i].longitude, patharr[i].latitude]);
            }

            that.path = that.path1;
          }

          that.loadmap();
        })
        .catch(() => {
          // console.log(121212)
        });
    });
  },
};
</script>
<style scoped>
#allmap {
  width: 100%;
  height: calc(100vh - 150px);
}
</style>