mini-img-map v0.1.13

页面加载后初始化 迷你图片地图

npm i mini-img-map

  .imgBox {
    transform-origin: center;
    background-image: url('./1.jpg');
  }

  <div class="imgBox smallImg">
    </div>
  /**
   *ele: 地图要放在哪个元素上
   *option: 是个对象 主要是
   *{
   *     size: 20,
   *     scale: 1,
   *}
   * callback: 地图点击后的回调方法
   */
    new MiniMap( document.querySelector(".imgBox"), {}, mapListener);

    let miniMap;
    window.onload = () => {
    let data = [
      { offsetX: 100, offsetY: 100, size: 30, ele: document.querySelector(".gif"), payload: { title: "介死一个腻子" } },
      { offsetX: 110, offsetY: 100, size: 30, ele: document.querySelector(".gis"), payload: { title: "介也四一个腻子哦" } },
      { offsetX: 500, offsetY: 200, size: 35, ele: document.querySelector(".gg"), payload: { title: "泥猜猜介死嘛" } },
    ];
    miniMap = new MiniMap({}, document.querySelector(".imgBox"), mapListener);

    循环创建点位
    for (let item of data) {
        miniMap.addEntity(item);
      }
    };

    function mapListener(data) {
      console.log(data);
    }

  打开编辑后 可以在地图上通过点击撒点
  function edit() {
     miniMap.isEdit = !miniMap.isEdit;
  }