高德地图鼠标经过点标记显示信息窗体

最新推荐文章于 2024-07-04 08:52:33 发布

钱厚端

最新推荐文章于 2024-07-04 08:52:33 发布

阅读量3.7k

点赞数 4

分类专栏：前端相关的配套使用文章标签：高德地图信息窗体鼠标移入移出

本文链接：https://blog.csdn.net/qq_42618566/article/details/115941232

版权

前端相关的配套使用专栏收录该内容

39 篇文章

订阅专栏

本文介绍如何在地图上创建标记并实现鼠标移入/移出事件触发信息窗体显示的功能。通过实例化信息窗体组件，并利用JavaScript进行事件绑定，能够动态展示每个站点的相关信息，包括设备总数、在线数等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

创建点标记：
实例化信息窗体
放入鼠标移入/移出事件

源码：

// 获取站点
getData() {
  api.stationMap(this.params).then((res) => {
    console.log(res);
    if (res.code === 0) {
      console.log("电站覆盖：", res.data);
      const that = this;
      const infoWindow = new AMap.InfoWindow({
        offset: new AMap.Pixel(0, -30),
      });
      this.markers = res.data.map((item) => {
        let marker = new AMap.Marker({
          position: item.location,
          offset: new AMap.Pixel(-10, -30),
        });
        marker.on("click", function (e) {
          console.log(e);
          that.equipmentModel = true;
          that.equipmentModelData = item;
        });
        marker.on("mouseover", function (e) {
          console.log(e);
          infoWindow.setContent(
            `<div class="description">
              <h5 class="title">${item.name}</h5>
              <div class="mt-3 detail">
                设备：${item.total}个<br />
                在线：${item.onLine}个<br />
                离线：${item.offLine}个<br />
                使用中：${item.inUse}个<br />
              </div>
            </div>`
          );
          infoWindow.open(that.map, item.location);
        });
        marker.on("mouseout", function (e) {
          console.log(e);
          infoWindow.close(that.map, item.location);
        });
        return marker;
      });
      this.map.add(this.markers);
    }
  });
},