bocai_supplyChain_pc/src/components/map.vue

<template>
  <!-- 
    :positionInfo="{
      lng: 113.863823,
      lat: 34.571367,
      name: '服务中心',
      desc: '河南省郑州市航空港区相州街29-60号（豫康新城-北区）',
      containerName: 'mapContainer1',
      picUrl:require('../../assets/bcSVG/服务中心.png')
    }"
 -->
  <div :id="positionInfo.containerName">
    <!-- <img :src="positionInfo.picUrl" alt="" v-show="isMapContainer" /> -->
    <!-- <img src="../assets/bcSVG/服务中心.png" alt="" v-show="isMapContainer" /> -->
  </div>
</template>

<script>
export default {
  // 组件名称
  name: "",
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {
    positionInfo: {
      require: true,
    },
  },
  // 组件状态值
  data() {
    return {
      isMapContainer: false,
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  beforeCreate() {
    let that = this;
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src =
      "https://webapi.amap.com/maps?v=1.4.15&key=44f4591aabba558514366f6e55f8d20e"; // 高德地图
    document.body.appendChild(script);
    setTimeout(function () {
      var infoWindow,
        map,
        level = 12,
        // center = { lng: 113.772207, lat: 34.757083 },
        center = { lng: that.positionInfo.lng, lat: that.positionInfo.lat },
        // features = [
        // 	{
        // 		icon: "cir",
        // 		color: "red",
        // 		name: "伯才科技有限公司",
        // 		desc: "河南省郑州市郑东新区升龙广场2号楼A座",
        // 		lnglat: {
        // 			Q: 34.75720614600168,
        // 			R: 113.77201218992474,
        // 			lng: 113.772207,
        // 			lat: 34.757083,
        // 		},
        // 		offset: { x: -9, y: -31 },
        // 		type: "Marker",
        // 	},
        // ];
        features = [
          {
            icon: "cir",
            color: "red",
            name: that.positionInfo.name,
            desc: that.positionInfo.desc,
            lnglat: {
              Q: that.positionInfo.lat,
              R: that.positionInfo.lng,
              lng: that.positionInfo.lng,
              lat: that.positionInfo.lat,
            },
            offset: { x: -9, y: -31 },
            type: "Marker",
          },
        ];
      function loadFeatures() {
        for (
          var feature, data, i = 0, len = features.length, j, jl, path;
          i < len;
          i++
        ) {
          data = features[i];
          switch (data.type) {
            case "Marker":
              feature = new AMap.Marker({
                map: map,
                position: new AMap.LngLat(data.lnglat.lng, data.lnglat.lat),
                zIndex: 3,
                extData: data,
                offset: new AMap.Pixel(data.offset.x, data.offset.y),
                title: data.name,
                content:
                  '<div class="icon icon-' +
                  data.icon +
                  " icon-" +
                  data.icon +
                  "-" +
                  data.color +
                  '"></div>',
              });
              break;
            case "Polyline":
              for (j = 0, jl = data.path.length, path = []; j < jl; j++) {
                path.push(new AMap.LngLat(data.path[j].lng, data.path[j].lat));
              }
              feature = new AMap.Polyline({
                map: map,
                path: path,
                extData: data,
                zIndex: 2,
                strokeWeight: data.strokeWeight,
                strokeColor: data.strokeColor,
                strokeOpacity: data.strokeOpacity,
              });
              break;
            case "Polygon":
              for (j = 0, jl = data.path.length, path = []; j < jl; j++) {
                path.push(new AMap.LngLat(data.path[j].lng, data.path[j].lat));
              }
              feature = new AMap.Polygon({
                map: map,
                path: path,
                extData: data,
                zIndex: 1,
                strokeWeight: data.strokeWeight,
                strokeColor: data.strokeColor,
                strokeOpacity: data.strokeOpacity,
                fillColor: data.fillColor,
                fillOpacity: data.fillOpacity,
              });
              break;
            default:
              feature = null;
          }
          if (feature) {
            AMap.event.addListener(feature, "click", mapFeatureClick);
            var infoWindow = new AMap.InfoWindow({
              content:
                "<div class='myinfowindow'><h5>" +
                that.positionInfo.name +
                "</h5><div>" +
                that.positionInfo.desc +
                "</div></div>", //信息窗体的内容
              offset: new AMap.Pixel(1, -20),
            });
            infoWindow.open(map, feature.getPosition());
          }
        }
      }
      function mapFeatureClick(e) {
        if (!infoWindow) {
          infoWindow = new AMap.InfoWindow({ autoMove: true, isCustom: false });
        }
        var extData = e.target.getExtData();
        infoWindow.setContent(
          "<div class='myinfowindow'><h5>" +
            extData.name +
            "</h5><div>" +
            extData.desc +
            "</div></div>"
        );
        infoWindow.open(map, e.lnglat);
      }
      // mapFeatureClick()
      map = new AMap.Map(that.positionInfo.containerName, {
        center: new AMap.LngLat(center.lng, center.lat),
        level: level,
        keyboardEnable: true,
        dragEnable: true,
        scrollWheel: true,
        doubleClickZoom: true,
      });
      console.log(map);
      loadFeatures();
      map.on("complete", function () {
        map.plugin(
          ["AMap.ToolBar", "AMap.OverView", "AMap.Scale"],
          function () {
            // map.addControl(new AMap.ToolBar({ ruler: true, direction: true, locate: false }));
            map.addControl(new AMap.OverView({ isOpen: false }));
            map.addControl(new AMap.Scale());
          }
        );
      });
    }, 200);
    setTimeout(() => {
      console.log(that.positionInfo.containerName);
      let map1 = document.querySelector("#" + that.positionInfo.containerName);
      // let map2 = document.querySelector("#mapContainer1");
      console.log(map1);
      console.log(map1.childNodes.length);
      // console.log(map2.childNodes.length);
      if (map1.childNodes.length <= 1) {
        that.isMapContainer = true;
      }
      // if (map2.childNodes.length <= 1) {
      // 	that.isMapContainer1 = true;
      // }
      // that.isMapContainer1 = true;
    }, 1000);
  },
  created() {},
  /**
   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
   */
  mounted() {},
  // 组件方法
  methods: {},
};
</script>

<style lang="less">
.amap-maps {
  margin: 0 auto;
  width: 200px;
  height: 172px;
}
.amap-maps .icon {
  width: 100px;
  background: url(//a.amap.com/lbs-dev-yuntu/static/web/image/tools/creater/marker.png)
    no-repeat;
}
.amap-maps .icon-cir {
  height: 31px;
  width: 28px;
}
.amap-maps .icon-cir-red {
  background-position: -11px -5px;
}
.amap-container {
  height: 100%;
}
.myinfowindow {
  width: 240px;
  min-height: 50px;
}
.myinfowindow h5 {
  height: 20px;
  line-height: 20px;
  overflow: hidden;
  font-size: 14px;
  font-weight: bold;
  width: 220px;
  text-overflow: ellipsis;
  word-break: break-all;
  white-space: nowrap;
}
.myinfowindow div {
  margin-top: 10px;
  min-height: 40px;
  line-height: 20px;
  font-size: 13px;
  color: #6f6f6f;
}
.amap-info-content {
  padding: 10px;
  .myinfowindow {
    width: 100px;
    overflow: hidden;
  }
  a {
    right: 5px !important;
  }
}
</style>