hik-map/amap/methods/infowindow/index.ts

- 提炼自浙江海康智联科技有限公司中后台产品的交互语言和视觉风格。 - 开箱即用的高质量 Vue 组件。

import './style.less';
const createWindow = function (mapOption, infoOption) {
  let title = '';
  const content: any = [];
  if (infoOption.title) {
    title = infoOption.title;
  }
  if (infoOption.middleImg) {
    content.push('<img src=' + infoOption.middleImg + '>');
  }
  if (typeof infoOption.middleMess === 'string') {
    content.push(`<div class='contentLabel'>` + infoOption.middleMess + `</div>`);
  } else {
    const infoContent = Object.keys(infoOption.middleMess);
    for (let i = 0; i < infoContent.length; i++) {
      content.push(
        `<span class='contentLabel'><span class="contentKey">` +
          infoContent[i] +
          '</span>:<span class="contentValue">' +
          infoOption.middleMess[infoContent[i]] +
          `</span></span>`,
      );
    }
  }
  const infoWindow = new mapOption.AMap.InfoWindow({
    isCustom: true,
    content: createInfoWindow(title, content.join('<br/>'), infoOption, mapOption),
    offset: new mapOption.AMap.Pixel(0, 0),
  });
  return infoWindow;
};
//构建自定义信息窗体
function createInfoWindow(title, content, infoOption, mapOption) {
  /*创建info主体*/
  const info = document.createElement('div');
  info.className = 'windowBox';
  info.style.cssText = infoOption.infoStyle;
  /*当传入title时创建title*/
  if (infoOption.title) {
    const top = document.createElement('div');
    top.className = 'title';
    const titleBox = document.createElement('div');
    titleBox.className = 'titleLabel';
    titleBox.innerHTML = title;
    titleBox.style.cssText = infoOption.titleStyle;
    /*创建关闭按钮 */
    const closeX: any = document.createElement('img');
    closeX.className = 'closeBtn';
    if (infoOption.closeImg) {
      closeX.src = infoOption.closeImg;
    } else {
      closeX.src = 'https://webapi.amap.com/images/close.gif';
    }
    closeX.style.cssText = infoOption.closeBtnStyle;
    // closeX.onclick = closeInfoWindow();
    closeX.addEventListener('click', () => {
      closeWindow(mapOption);
    });
    /*push标题&&关闭按钮*/
    top.appendChild(titleBox);
    top.appendChild(closeX);
    info.appendChild(top);
  }

  /*定义中部内容*/
  const middle = document.createElement('div');
  if (typeof infoOption.middleMess === 'string') {
    middle.style.cssText = infoOption.middleStyle;
  }

  middle.className = 'Content';
  middle.innerHTML = content;
  info.appendChild(middle);
  return info;
}
//关闭信息窗体
const closeWindow = function (mapOption) {
  mapOption.map.clearInfoWindow();
};
export { createWindow, closeWindow };