点标记实例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 = `
`
  headWrapper.innerHTML = headerContent;

  // 内容主体
  var contentWrapper = document.createElement("div");
  contentWrapper.className = 'centerInfo';
  contentWrapper.innerHTML = `
${item.label}
`;
  //操作按钮
  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 = ``;

  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写在局部作用 里无效