点标记实例1：动态获取数据，点击标记点--弹出自定义信息窗, 弹出框交互操作

1、构建自定义信息窗体

//构建自定义信息窗体
function createInfoWindow(item) {
  // 外层容器
  var info = document.createElement("div");
  info.className = "info_wrapper";
  // 头部
  var headWrapper = document.createElement("div");
  headWrapper.className = 'head_infow'
  let headerContent = `<div><span></span><img ${onclick= closeInfoWindow} style="cursor: pointer;" src="https://webapi.amap.com/images/close2.gif" alt=""></div>`
  headWrapper.innerHTML = headerContent;

  // 内容主体
  var contentWrapper = document.createElement("div");
  contentWrapper.className = 'centerInfo';
  contentWrapper.innerHTML = `<div class="singleLine">${item.label}</div>`;
  //操作按钮
  let topartybtn = document.createElement("div");
  topartybtn.className = 'topartybtn'
  topartybtn.setAttribute('id',item.id)
  topartybtn.innerHTML = '进入';
  topartybtn.ontouchstart = tomain;
  contentWrapper.appendChild(topartybtn);

  // 尾部
  let footerWrapper= document.createElement("div");
  footerWrapper.innerHTML = `<img src="static/img/sharp.png" style="width: 20px;height: 20px;margin: 0 auto;position: absolute;bottom: -11px;left: 50%;"/>`;

  info.appendChild(headWrapper);
  info.appendChild(contentWrapper);
  info.appendChild(footerWrapper);

  return info;
}
// 信息窗中交互操作
function tomain() {
    //...
}
//关闭信息窗体
function closeInfoWindow() {
    _this.map.clearInfoWindow();
}

2、创建 infoWindow 实例

var infoWindow = new AMap.InfoWindow({
  isCustom: true,  //使用自定义窗体
    //传入 dom 对象，或者 html 字符串
  // content: infoWindowContent,
  offset: new AMap.Pixel(0, -40),
  autoMove: true
});

3、获取数据列表后dataList，遍历添加标记点

if(dataList.length) {
    dataList.forEach((item) => {
        var marker = new AMap.Marker({
            icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
            position: new AMap.LngLat(item.longitude,item.latitude),
            title: item.label,
        });
        marker.content=createInfoWindow(item)
        marker.on('click',onMarkerClick)
        marker.setMap(_this.map);
    })
}

function onMarkerClick(e) {
    if(infoWindow.getIsOpen()) {
      infoWindow.close();
    }else {
      infoWindow.setContent(e.target.content)
      infoWindow.open(_this.map, e.target.getPosition());
    }
}

// 点击地图其他区域关闭信息窗
_this.map.on('click',function() {
    if(infoWindow.getIsOpen()) {
      infoWindow.close();
    }
})

4、css 部分

// 注意：css写在局部作用<style scoped></style> 里无效
<style>
/* 地图信息窗体 */
  .info_wrapper {
    width: 200px;
    font-size: 12px;
    padding: 0 0 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    overflow: hidden;
  }
  .head_infow {
    display:flex;
    background:#fff;
    line-height:30px;
    background:#f5f5f5;
    padding: 0 10px;
  }
  .centerInfo {
    line-height: 20px;
    padding: 0 10px;
  }
  .topartybtn {
    width:50px;
    line-height:20px;
    border-radius: 4px;
    border: 1px solid #ccc;
    text-align: center;
    float: right;
    margin-top: 0;
    color: red;
  }
</style>