initMap() {
      // 初始化地图
      const map = new AMap.Map("mapContainer", { resizeEnable: true, viewMode: '2D', lang: 'zh_cn' });
      // 信息窗口实例
      const infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(6, -32) });
      var cluster; var markers = []
      // 遍历生成多个标记点
      for (let i = 0, marker; i < this.lnglats.length; i++) {
        marker = new AMap.Marker({
          position: this.lnglats[i], // 不同标记点的经纬度
          map: map,
          icon: this.flag ? this.img.point : this.img.device
        });
        if (this.flag) {
          marker.content = `
          <div class="infoWindow">
            <div class="infoTitle">点位信息</div>
            <div class="infoContent">
              <div class="viewImg">
                <img src=${this.config.cadActionUrl + this.dataList[i].photoUrl} alt="">
              </div>
              <div class="detailsBox">
                <div class="detailsBar">
                  <span class="detailContent">点位名称:</span>
                  <span class="detailContent">${this.dataList[i].name}</span>
                </div>
                <div class="detailsBar">
                  <span class="detailContent">点位类型:</span>
                  <span class="detailContent">${this.dataList[i].typeName ?this.dataList[i].typeName : '暂无'}</span>
                </div>
                <div class="detailsBar">
                  <span class="detailContent detailsClick" onclick="detailClick(${this.dataList[i].id ? this.dataList[i].id : '暂无'})">点位详情></span>
                </div>
              </div>
            </div>
          </div>
          `
        } else {
          marker.content = `
            <div class="infoWindow">
              <div class="infoTitle">设备信息</div>
              <div class="infoContent">
                <viewer class="viewImg">
                  <img src=${config.cadActionUrl + this.dataList[i].photo} alt="">
                </viewer>
                <div class="detailsBox">
                  <div class="detailsBar">
                    <span class="detailContent">设备名称:</span>
                    <span class="detailContent">${this.dataList[i].name}</span>
                  </div>
                  <div class="detailsBar">
                    <span class="detailContent">设备类型:</span>
                    <span class="detailContent">${this.dataList[i].typeName ? this.dataList[i].typeName : '暂无'}</span>
                  </div>
                  <div class="detailsBar">
                    <span class="detailContent">IP地址:</span>
                    <span class="detailContent">${this.dataList[i].ip ? this.dataList[i].ip : '暂无'}</span>
                  </div>
                  <div class="detailsBar">
                    <span class="detailContent">杆件编号:</span>
                    <span class="detailContent">${this.dataList[i].rodCode ? this.dataList[i].rodCode : '暂无'}</span>
                  </div>
                  <div class="detailsBar">
                    <span class="detailContent">设备状态:</span>
                    <span class="detailContent">${this.onlineChange(this.dataList[i].online)}</span>
                  </div>
                  <div class="detailsBar">
                    <span class="detailContent detailsClick" onclick="detailClick(${this.dataList[i].id},${this.dataList[i].pointId})">设备详情></span>
                  </div>
                </div>
              </div>
            </div>
            `
        }
        marker.on('click', markerClick);
        // marker.emit('click', { target: marker })// 默认初始化出现最后一条信息窗体
        markers.push(marker)
      }
      map.plugin(["AMap.MarkerClusterer"], function () {
        if (cluster) {
          cluster.setMap(null)
        }
        cluster = new AMap.MarkerClusterer(map, markers);
      });
      function markerClick(e) {
        infoWindow.setContent(e.target.content)
        infoWindow.open(map, e.target.getPosition())
      }
      map.setFitView()
    }

lnglats数组是所有经纬度集合,dataList是所有数据集合

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐