MapDetail.vue

// 地图组件

<template>
  <div class="my-map">
    <el-amap
      ref="map"
      vid="amapDetail"
      :amap-manager="amapManager"
      :center="center"
      expandZoomRange
      :zoom="20"
      :pitch="65"
      :rotation="45"
      viewMode="3D"
      :plugin="plugin"
      :events="events"
      class="amap-demo"
    >
      <div class="tuli1"><slot name="leftTop1"></slot></div>
      <div class="tuli"><slot name="leftTop"></slot></div>

      <div class="rightTop"><slot name="rightTop"></slot></div>

      <!--marker  -->
      <el-amap-marker
        v-for="(marker, index) in markers"
        :key="'marker' + index"
        :events="marker.events"
        :position="marker.position"
        :contentRender="contentRender"
        :icon="marker.icon"
        :extData="marker"
      >
      </el-amap-marker>
    </el-amap>
  </div>
</template>

<script>
import { formatterDate } from "@/assets/utils/index";
import { AMapManager } from "vue-amap";
let amapManager = new AMapManager();
export default {
  name: "MapDetail",
  props: {
    value: {
      type: Boolean,
    },
    originData: {
      type: Object,
      default: () => {},
    },
    markersData: {
      type: Array,
      required: false,
      default: () => [],
    },
  },
  computed: {
    visible: {
      get() {
        return this.value;
      },
      set() {
        this.$emit("input", false);
      },
    },
  },
  created() {
    //this.refresh(this.markersData);
  },
  methods: {
    formatterDate,
    contentRender(h, params) {
      //console.log(params.extData.extData.productId)
      let value = params.extData.extData.productName;
      return <img src={require(`../assets/images/${value}.png`)} />;
    },
    getDeviceDetial() {
      //获取设备列表
    },
    refresh(data) {
      // this.markersGroupData = data;
      //this.$refs.map.clear();
      let map = this.amapManager.getMap();
      map.clearMap();

      for (let group of data) {
        for (let item of group.deviceList) {
          //console.log("marker", item);
          this.setMarker(item);
        }
      }
    },

    relocate(center) {
      this.center = [center.lng, center.lat];
      this.zoom = 20;
      //重新定位中心点
    },

    setMarker(item) {
      if (!item.lon && !item.lati) return;

      let markerLabel = {
        label: { content: item.deviceName, offset: [30, 70] },
        position: [item.lon, item.lati],

        extData: item,

        events: {
          click: (e) => {
            console.log("getExtData", e.target.getExtData());
          },
        },
      };

      this.markers.push(markerLabel);
    },

    choose() {
      this.$emit("input", false);
      this.$emit("choose", JSON.parse(JSON.stringify(this.mapData)), (val) => {
        //data = val;
      });
    },
  },
  data() {
    return {
      markersGroupData: [],
      mapData: {},
      info: {},
      markers: [],
      geocoder: null,
      amapManager,
      zoom: 20,
      center: [104.007767, 30.568308],
      marker: {},

      // 一些工具插件
    };
  },
};
</script>

<style lang="less">
.tuli {
  width: 400px;
  top: 20px;
  left: 34px;
  position: absolute;
  float: left;
  background-color: rgba(255, 255, 255, 0.7);
}
.tuli1 {
  width: 150px;
  top: 10px;
  left: 34px;
  position: absolute;
  float: left;
  background-color: rgba(255, 255, 255, 0.7);
}
.rightTop {
  width: 200px;
  top: 0px;
  right: 0px;

  position: absolute;
  float: right;
  background-color: rgba(255, 255, 255, 1);
}
.amap-info-content {
  position: relative;
  background: #fff;
  line-height: 1.4;
  overflow: auto;
}
.my-map {
  width: 100%;
  height: 93vh;
  .amap-demo {
    position: relative;
    width: 100%;
    height: 100%;
    .map-marker {
      position: relative;
      width: 30px;
      height: 30px;
      img {
        position: absolute;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
      }
      .el-tag {
        position: absolute;
        color: #fff;
        top: 30px;
        transform: translateX(-50%);
        background: #f56c6c;
      }
    }
    .el-vue-search-box-container {
      position: absolute;
      top: -28px;
      width: 100%;
      box-shadow: 0 0 3px #ccc;
      .search-tips {
        width: 100%;
        max-height: 300px;
      }
    }
  }
}
</style>