运行实例

代码

<template>
  <div class="bodymap2" id="echartmap5"></div>
</template>

<script>
import $ from 'jquery'
import car from './images/car.png'
import car2 from './images/car2.png'
import icon_chuxing from './images/icon_chuxing.png'
import Vue from 'vue'

export default {
  data() {
    return {
      infoWindow: null,
      active: false,
      center: {
        lng: 0,
        lat: 0
      },
      zoom: 3,
      map: null,
      mapactive: 0,
      markers: [],
      list: [
        [125.350472, 43.927952, "贵A123322", 1],
        [125.385472, 43.887952, "贵A123322", 0],
        [125.337472, 43.857952, "贵A123323", 1]
      ]
    }
  },
  components: {},
  created() {

  },

  mounted() {
    this.getmap()
  },
  methods: {
    getguiji() {
      var that = this;
      var title = '测试内容';
      that.map.clearMap();
      $.get("https://restapi.amap.com/v3/direction/driving?origin=125.317472,43.827952&destination=125.317472,43.897952&extensions=all&output=JSON&key=be862a6b566f949c5f44328c875e9c3d", function (data, status) {
        //设置数据
        let steps = data.route.paths[0].steps;
        var path = [];
        var path2 = [];
        for (var i = 0; i < steps.length; i++) {
          path.push(steps[i].polyline.split(";"))
        }
        for (var i = 0; i < path.length; i++) {
          for (var s = 0; s < path[i].length; s++) {
            path2.push(path[i][s])
          }
        }
        var path3 = []
        for (var i = 0; i < path2.length; i++) {
          var datai = path2[i].split(",");
          path3.push(datai)
        }
        var marker = new AMap.Marker({
          map: that.map,
          position: path3[0],
          icon: car2,
          offset: new AMap.Pixel(-25, -20),
          autoRotation: true,
          angle: 0,
        });

        var markerContent = document.createElement("div");
        var markerImg = document.createElement("img");
        markerImg.className = "markerlnglat";
        markerImg.src = car2;
        markerContent.appendChild(markerImg);
        var markerSpan = document.createElement("span");
        markerSpan.className = 'markerx';
        markerSpan.innerHTML = title;
        markerContent.appendChild(markerSpan);
        marker.setPosition(path3[0]);
        marker.setContent(markerContent);
        marker.setMap(that.map);
        that.addStartMarker(path3[0])
        console.log(path3.length)
        console.log(path3[path3.length])
        that.addEndMarker(path3[path3.length - 1])
        // 绘制轨迹
        var polyline = new AMap.Polyline({
          map: that.map,
          path: path3,
          showDir: false,
          strokeColor: "rgba(255, 39, 95, 1)",  //线颜色
          // strokeOpacity: 1,     //线透明度
          strokeWeight: 2,      //线宽
          // strokeStyle: "solid"  //线样式
        });

        var passedPolyline = new AMap.Polyline({
          map: that.map,
          // path: lineArr,
          strokeColor: "rgba(255, 39, 95, 1)",  //线颜色
          // strokeOpacity: 1,     //线透明度
          strokeWeight: 2,      //线宽
          // strokeStyle: "solid"  //线样式
        });

        marker.on('moving', function (e) {
          var markerContent = document.createElement("div");
          var markerImg = document.createElement("img");
          markerImg.className = "markerlnglat";
          markerImg.src = car2;
          markerContent.appendChild(markerImg);
          var markerSpan = document.createElement("span");
          // markerSpan.className = 'markerx';
          // markerSpan.innerHTML = that.list1x[that.mapactive];
          markerContent.appendChild(markerSpan);
          marker.setContent(markerContent);
          passedPolyline.setPath(e.passedPath);
        });

        that.map.setFitView();

        function startAnimation() {
          marker.moveAlong(path3, 10000);
        }

        function pauseAnimation() {
          marker.pauseMove();
        }

        function resumeAnimation() {
          marker.resumeMove();
        }

        function stopAnimation() {
          marker.stopMove();
        }

        startAnimation();
      });
    },
    getmap() {
      var that = this;
      that.map = new AMap.Map('echartmap5', {
        resizeEnable: true,
        zoom: 17,
        scrollWheel: true,
        viewMode: '2D',
        pitch: 50,
        rotation: 0,
        maxZoom: 30,
        minZoom: 0,
        mapStyle: 'amap://styles/darkblue',
        features: ['bg', 'road', 'building'],
        center: [125.317472, 43.827952]
      });
      var marker = new AMap.Marker({
        map: this.map,
        position: [125.317472, 43.827952],
      });
      var markerContent = document.createElement("div");
      marker.setContent(markerContent);
      that.getguiji()
      var listdata = that.list
      listdata.forEach((type) => {
        that.addMarker(type[0], type[1], type[2], type[3])
      });
    },
    markerClick(e) {
      var that = this;
      console.log(e.target.getExtData())
      console.log(123333)
      let MyComponent = Vue.extend({
        template: `
          <div class="shipinpop">
          <div class="daohang">
            <img :src="icon_chuxing" alt="">
            <p>出行</p>
          </div>
          <div class="cars">
            <img :src="car" alt="">
            <p>贵A123321</p>
          </div>
          <div class="carinfo">
            <p>张三：遥控器</p>
            <p>李四：枪 <span></span> 王五：枪</p>
            <p>马六：枪 <span></span> 赵七：枪</p>
          </div>
          </div>`,
        data: function () {
          return {
            loading: true,
            icon_chuxing: icon_chuxing,
            car: car,
          }
        },
        mounted() {
        },
        methods: {}
      });
      let component = new MyComponent().$mount();
      let infoWindow = new AMap.InfoWindow({
        anchor: 'top-left',
        offset: new AMap.Pixel(-20, -35),
        content: component.$el,
      });
      infoWindow.open(that.map, [e.lnglat.lng, e.lnglat.lat]);
      that.infoWindow = infoWindow;
    },
    addMarker(x, y, obj, type) {
      let marker = null;
      var type1 = '<div class="overlay"/>'
      var type2 = `<div class="overlay2">
<div class="info">${obj}</div>
</div>`
      marker = new AMap.Marker({
        title: '运钞车',
        position: [x, y],
        content: type == 0 ? type1 : type2,
        offset: new AMap.Pixel(-13, -30)
      });
      marker.on('click', this.markerClick);
      marker.setMap(this.map);
      this.markers.push(marker);
    },
    addStartMarker(positon) {
      let marker = null;
      marker = new AMap.Marker({
        title: '开始',
        position: positon,
        content: '<div class="startoverlay"/>',
        offset: new AMap.Pixel(-13, -30)
      });
      marker.setMap(this.map);
      this.markers.push(marker);
    },
    addEndMarker(positon) {
      let marker = null;
      marker = new AMap.Marker({
        title: '结束',
        position: positon,
        content: '<div class="endoverlay"/>',
        offset: new AMap.Pixel(-13, -30)
      });
      marker.setMap(this.map);
      this.markers.push(marker);
    },
  },
  filters: {},
  watch: {}
}
</script>

<style lang="scss">
.bm-view {
  width: 100%;
  height: 100%;
  position: relative;
}

.bodymap2 {
  width: 100%;
  height: 100%;
  position: relative;
}

.markerx {
  background: #fff;
  font-size: 14px;
  color: #333;
  position: absolute;
  width: 130px;
  padding: 10px;
  border-radius: 10px;
}

.pulsex {
  -webkit-animation: warn 2.4s ease;
  -moz-animation: warn 2.4s ease;
  animation: warn 2.4s ease;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  background-size: 100% 100%;
  width: 180px;
  margin-top: -50%;
  margin-left: -50%;
  height: 180px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;

  img {
    width: 0;
    height: 0;
  }

  &::after {
    content: ' ';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    //background: red;
  }
}

.overlay {
  background: url("./images/car2.png");
  width: 51px;
  height: 35px;
  background-size: 100% 100%;
  position: relative;
  color: #fff;
  font-size: 0px;
}

.amap-info-content {
  background: none;
  overflow: hidden;
}

.amap-info-close {
  top: 20px;
  right: 35px !important;
  color: rgba(0, 181, 242, 1);
}

.amap-info-shadowContainer > div {
  top: -20px;
}

.amap-info-sharp {
  display: none;
}

.amap-container:hover {
  background: none !important;
}

.amap-info-outer, .amap-menu-outer {
  box-shadow: none !important;
}

.shipinpop {
  background: url("./images/mappopbg.png") no-repeat;
  width: 508px;
  height: 196px;
  background-size: 100% 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  left: 0px;
  top: -20px;
  position: relative;
  flex-wrap: nowrap;
  flex-direction: row;

  .daohang {
    width: 200px;
    height: 170px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: column;

    img {
      width: 25px;
      height: 33px;
    }

    p {
      font-size: 18px;
      font-family: PingFang;
      font-weight: 500;
      color: #1CCEF2;
      margin: 0;
      padding: 0;
      margin-top: 10px;
    }
  }

  .cars {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: column;
    width: 100px;

    img {
      width: 49px;
      height: 36px;
    }

    p {
      font-size: 13px;
      font-family: PingFang;
      font-weight: bold;
      color: #FFFFFF;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      text-indent: 0;
      padding-top: 10px;
    }
  }

  .carinfo {
    margin-left: 30px;

    p {
      font-size: 13px;
      color: rgba(184, 217, 255, 1);
      font-family: PingFang;
      font-weight: 500;
      color: #B8D9FF;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      line-height: 30px;
      text-indent: 0;

      span {
        margin-left: 10px;
        margin-right: 10px;
      }
    }
  }
}

.startoverlay {
  background: url("./images/startimg.png");
  width: 73px;
  height: 73px;
  background-size: 100% 100%;
  margin-left: -35px;
}

.endoverlay {
  background: url("./images/endimg.png");
  width: 25px;
  height: 31px;
  background-size: 100% 100%;
  margin-left: 0px;
}

.overlay2 {
  background: url("./images/icon_car2.png") no-repeat;
  width: 87px;
  height: 87px;
  background-size: 100% 100%;
  position: relative;

  .info {
    width: 90px;
    height: 30px;
    background: #081C44;
    opacity: 1;
    border: 1px solid #165586;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    font-size: 14px;
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #FFFFFF;
    position: absolute;
    bottom: -20px;
    left: 0;
  }
}
</style>