轨迹地图：信息窗口点击和非点击

微信图片_20230210180047.png

引入

 <script type="text/javascript" src="//webapi.amap.com/maps?v=2.0&key=dd2aa020f5cffa027de1c19ce5d7a3f1"></script>
  <script src="https://webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>
  <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>

html

<template>
  <div class="lineMap" id="select-map"></div>
</template>
<style lang="less" src="./lineMap.less" scoped></style>
<script src="./lineMapJs.js"></script>

js

import { linePointList, relationList } from "@/api/fzyMap";
import mapIcon from "@/assets/images/mapIcon1.png";
export default {
  data() {
    return {
      line_id: "",
      dataList: [], //点位
      relaCategory: 1, //1文物,2文保单位,3相关新闻,4文献,5其他
      dataList: [],
      listLi1: [],
      listLi2: [],
      marList: [],
      polyline: null,
      clickId: "",
      select1Id: ""
    };
  },
  mounted() { },
  methods: {
    /**根据父级传的线路id显示地图线路 */
    showLine(item) {
      this.$nextTick(() => {
        this.createMap();
        console.log(item);
        this.line_id = item.id;

        //假数据1----------------------------------------
        // this.dataList = [
        //   {
        //     name: "金牛区金牛区金牛区金牛区",
        //     id: 1,
        //     lng: 104.398543,
        //     lat: 30.329472,
        //     update_time: "2022-05-08 12:12:12"
        //   },
        //   {
        //     name: "郫都区",
        //     id: 2,
        //     lng: 103.843262,
        //     lat: 30.821168
        //   },
        //   {
        //     name: "新都区",
        //     id: 3,
        //     lng: 104.138519,
        //     lat: 30.820578
        //   }
        // ];
        this.relationListFun();
        //假数据0----------------------------------------

        linePointList({ page: 1, limit: 999, line_id: this.line_id }).then((res) => {
          this.dataList = res.data.data.list;
          this.relationListFun();
        });
      });
    },
    /**查询点的绑定内容 */
    async relationListFun() {
      await this.dataList.forEach(async (v) => {
        v.select1 = [
          {
            id: 1,
            name: "文物",
            select2: []
          },
          {
            id: 2,
            name: "文保单位",
            select2: []
          },
          {
            id: 3,
            name: "相关新闻",
            select2: []
          },
          {
            id: 4,
            name: "文献",
            select2: []
          },
          {
            id: 5,
            name: "其他",
            select2: []
          }
        ];
        await relationList({ page: 1, limit: 999, point_id: v.id }).then((res) => {
          res.data.data.list.forEach((v2) => {
            v.select1[v2.relaCategory - 1].select2.push(v2);
          });
        });
      });
      this.showLin();
      console.log("dataList", this.dataList);
    },
    /**显示已配置点连线 */
    showLin() {
      this.clickId = "";
      this.dataList.forEach((v) => {
        v.modify = false;
      });
      if (this.polyline) {
        this.map.remove(this.polyline);
      }
      let arr = []; //经纬度坐标数组
      this.dataList.forEach((v) => {
        arr.push(new AMap.LngLat(v.lng, v.lat, true));
      });
      this.polyline = new AMap.Polyline({
        path: arr,
        strokeWeight: 12,
        geodesic: true,
        lineJoin: "round",
        showDir: true,
        strokeColor: "#29b6f6",
        outlineColor: "white",
        isOutline: true,
        strokeWeight: 6.0,
        zIndex: 2,
        isOutline: true
      });
      this.map.add(this.polyline);
      this.showMarkList();
    },
    /**显示已配置点位点标记 */
    showMarkList(type) {
      this.marList.forEach((v) => {
        v.remove();
      });
      this.marList = [];
      this.dataList.forEach((v) => {
        // 自定义弹出信息窗体样式和数据绑定
        let mark = new AMap.Marker({
          extData: { item: v },
          map: this.map,
          zIndex: this.clickId === v.id ? 11 : 10,
          position: [v.lng, v.lat],
          offset: new AMap.Pixel(-17, -30), // 便宜了设置图片的一半
          content: this.contentHtml(v)
        });
        mark.on("click", this.marker_clickFun);
        this.marList.push(mark);
      });
      let clickDiv = document.querySelectorAll(".clickDiv"); //元素显示后绑定事件
      if (clickDiv) {
        console.log(clickDiv, clickDiv.length);
        for (var i = 0; i < clickDiv.length; i++) {
          clickDiv[i].onclick = (e) => {
            let itemId = e.currentTarget.id;
            let item = this.listLi2.find(
              (item0) => item0.id === Number(itemId)
            );
            this.$emit("infoDivFun", item);
          };
        }
      }
      if (!type) {
        this.map.setFitView(); // 自适应标记点显示
      }
    },
    /** 信息框 */
    contentHtml(item) {
      let img = `<div class="imgBox">`;
      img += `<img  src="${mapIcon}" />`;
      img += `</div>`;
      let infoDiv = "";
      // console.log(this.clickId, item.id)
      if (this.clickId == item.id) {
        infoDiv =
          '<div class="divBox" onmouseenter="onmouseenterFun()" onmouseleave="onmouseleaveFun()">';
        window.onmouseenterFun = () => {
          console.log("鼠标移入");
          this.map.setStatus({ zoomEnable: false });
        };
        window.onmouseleaveFun = () => {
          console.log("鼠标出");
          this.map.setStatus({ zoomEnable: true });
        };
        infoDiv += `<div class="x" onclick="xFun()">关闭</div>`;
        window.xFun = () => {
          this.clickId = "";
          console.log("关闭");
          this.map.setStatus({ zoomEnable: true });
          this.showMarkList();
        };
        infoDiv += `<div class="tableBox" >${item.name}</div>`;
        infoDiv += `<div class="selectBody">`;
        let select1 = "";
        if (this.listLi1.length > 0) {
          select1 += `<div class="selectBox">`;
          select1 += `<span>类型选择：</span>`;
          select1 += `<div class="selectDiv"><select id="1select${item.id}" onchange="
            select1Fun(${item.id}) ">`;

          this.listLi1.forEach((v2) => {
            select1 += `<option value="${v2.id}">${v2.name}</option>`;
          });
          select1 += `</select></div>`;
          this.$nextTick(() => {
            $(`#1select${item.id}`).val(this.select1Id); // 设置选中项
          });
          window.select1Fun = (id) => {
            console.log("id", id);
            let val = $(`#1select${id}`).find("option:selected").text();
            console.log(val, "选择类型");
            this.select1Id = $(`#1select${id}`).find("option:selected").val();
            this.listLi2 = this.listLi1.find(
              (res1) => res1.id == this.select1Id
            ).select2;
            this.showMarkList(true);
          };
          select1 += "</div>";
        }
        infoDiv += select1 + `</div>`;
        let infoBox = `<div class="infoBox" id="infoBox">`;
        if (this.listLi2.length > 0) {
          this.listLi2.forEach((v) => {
            infoBox += `<div class="liDiv"><div id="${v.id}" title="${v.title}${v.title}${v.title}${v.title}${v.title}${v.title}${v.title}${v.title}${v.title}${v.title}${v.title}${v.title}${v.title}${v.title}" class="clickDiv" ><span>${v.title}</span></div><div><img src="${v.showPath}" /></div></div>`;
          });
        } else {
          infoBox += `<div class="liDiv0">无数据</div>`;
        }
        infoBox += `</div>`;
        infoDiv += infoBox + `</div>`;
      } else {
        infoDiv = `<div class="info">${item.name}</div>`;
      }
      let html = `<div class="contentBox">` + img + infoDiv + `</div>`;
      return html;
    },
    onFun(e) {
      console.log(e);
    },
    /** 点击放大标记点 */
    marker_clickFun(e) {
      let keyId = e.target.getExtData().item.id;
      if (this.clickId != keyId) {
        this.clickId = keyId;
        let item = this.dataList.find((res) => res.id == this.clickId);
        this.map.setCenter([item.lng, item.lat], false, 100);
        this.select1Id = "";
        this.select2Id = "";
        this.select1Id = item.select1[0].id;
        this.listLi1 = item.select1;
        this.listLi2 = item.select1[0].select2;
        this.showMarkList(true);
        // this.map.setFitView(e.target) // 自适应标记点显示
      }
    },
    /**创建地图*/
    createMap() {
      this.center = [104.398543, 30.329472];
      this.$nextTick(() => {
        // 地图加载
        this.map = new AMap.Map("select-map", {
          // zoom: 10,
          zoom: 7,
          pitch: 0, // 地图俯仰角度，有效范围 0 度- 83 度
          viewMode: "3D", // 地图模式
          center: this.center
        });
        AMap.plugin(
          [
            "AMap.ToolBar",
            "AMap.Scale",
            "AMap.OverView",
            "AMap.MapType",
            "AMap.Geolocation"
          ],
          () => {
            // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
            this.map.addControl(new AMap.Scale());
          }
        );
      });
    }
  }
};

css

.lineMap {
  width: 100%;
  height: 100%;
}

::v-deep {
  .contentBox {
    position: relative;
    text-align: center;

    .imgBox {
      display: inline-block;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;

      >img {
        width: 30px;
        height: 30px;
      }
    }

    .info {
      box-shadow: 0px 0px 15px #3e89fc;
      position: absolute;
      top: -30px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(248, 248, 248, 0.8);
      padding: 5px;
      border-radius: 4px;
      margin: 0;
      font-weight: 600;
      color: #000;
      white-space: nowrap;
    }
  }
}

::v-deep {
  .contentBox {
    position: relative;
    cursor: default;

    div {
      box-sizing: border-box;
    }

    .imgBox {
      display: inline-block;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 100;

      >img {
        width: 30px;
        height: 30px;
        cursor: pointer;
      }
    }

    .divBox {
      box-shadow: 0px 0px 15px #ddd;
      position: absolute;
      z-index: 999;
      width: 400px !important;
      // height: 200px;
      min-width: 0 !important;
      bottom: 55px;
      left: 50%;
      transform: translateX(-50%);
      padding: 10px 15px;
      border-radius: 4px;
      margin: 0;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
      background: #f2f2f2;

      .x {
        position: absolute;
        right: 20px;
        top: 10px;
        color: #666;
        cursor: pointer;
        font-size: 16px;
      }

      .tableBox {
        font-weight: 600;
        padding: 5px 0 0 0;
        text-align: left;
        font-size: 16px;
      }

      .selectBody {
        display: flex;
      }

      .selectBox {
        flex: 1;
        display: flex;
        padding: 10px 0;

        >span {
          display: inline-block;
          padding-top: 5px;
        }

        .selectDiv {
          flex: 1;
          border-color: #ddd;

          select {
            width: 100%;
            height: 25px;
          }
        }
      }

      .selectBox :after {
        color: #ddd;
      }

      .infoBox {
        border-top: 1px solid #999;
        padding: 10px 0;
        max-height: 190px;
        overflow-y: auto;

        .liDiv {
          margin: 5px 0;
          position: relative;
          width: 100%;
          display: flex;
          height: 70px;
          padding: 5px 10px;
          box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);

          >div:nth-of-type(1) {
            z-index: 8888;
            flex: 1;
            height: 60px;
            text-align: left;
            color: #3e89fc;
            font-size: 18px;
            font-weight: 600;
            line-height: 60px;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 1;
            line-clamp: 1;
            -webkit-box-orient: vertical;
            word-break: break-all;
            word-wrap: break-word;
            text-overflow: ellipsis;
            white-space: nowrap;

            >span {
              cursor: pointer;
            }
          }

          >div:nth-of-type(2) {
            margin-left: 20px;
            flex: none;
            width: 85px;
            height: 60px;

            >img {
              display: inline-block;
              position: relative;
              top: 50%;
              left: 50%;
              max-width: 100% !important;
              max-height: 100% !important;
              transform: translate(-50%, -50%);
            }
          }
        }

        .liDiv0 {
          text-align: center;
          padding: 10px;
          color: #666;
        }

        .aDiv {
          >div {
            text-align: left;
            color: #666;
            font-weight: 600;
            padding-bottom: 5px;
          }

          a {
            width: 100%;
            white-space: pre-wrap;
            word-break: break-all;
            text-align: left !important;
            color: #3e89fc;
          }
        }
      }

      .infoBox::-webkit-scrollbar {
        width: 10px;
      }

      .infoBox::-webkit-scrollbar-thumb {
        border-radius: 10px;
      }
    }
  }

  .el-popover {
    transform: translateX(-50px) !important;
  }
}