高德地图自定义infowindow内容

最新推荐文章于 2025-02-11 15:34:05 发布

test_404

最新推荐文章于 2025-02-11 15:34:05 发布

阅读量1.2k

点赞数

文章标签： html javascript html5

本文链接：https://blog.csdn.net/qq_41646298/article/details/120221961

版权

这篇博客介绍了如何利用高德地图（AMap）API创建地图上的Marker，并设置其图标、标题和位置。同时，展示了如何设置Marker的点击事件，以及创建自定义的InfoWindow展示详细信息。InfoWindow内容包括顶部标题、关闭按钮以及中部和底部的自定义布局。此外，还提供了关闭InfoWindow的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


// 创建一个marker 在地图上显示
              var markerMC = new AMap.Marker({
                icon: '',//图标
                title:'',//标题
                position: ['经度','纬度'],
                map: map
              });
              markerMC.content = `自定义marker内容`;
              markerMC.on('click', markerClickMC);//点击marker点调用方法
              // markerMC.emit('click', {   : markerMC });默认点击

// 设置label
              markerMC.setLabel({
                  offset: new AMap.Pixel(20, -10),
                  content: 'label内容'
                })



// 可配合marker点击方法传入相关参数
    function markerClickMC(e) {
      var infoWindowMenci = new AMap.InfoWindow({
        isCustom: true,//启用自定义窗体
        content: InfoWindowMC(e.target.content),//调用窗体方法 传入html字符串
        offset: new AMap.Pixel(0, -30)//信息窗偏移
      });
      // 设置了infowindows content就不能显示自定义信息窗体？
      // infoWindowMenci.setContent(e.target.content);
      infoWindowMenci.open(map, e.target.getPosition());//打开信息窗
    }



//构建自定义信息窗体
function InfoWindowMC(cont) {
  // cont自定义内容 html字符串
  var info = document.createElement("div");
    info.className = "custom-info input-card content-window-card";

    //可以通过下面的方式修改自定义窗体的宽高
    //info.style.width = "400px";
    // 定义顶部标题
    var top = document.createElement("div");
    var titleD = document.createElement("div");
    var closeX = document.createElement("img");
    top.className = "info-top";
    // titleD.innerHTML = title;
    closeX.src = "https://webapi.amap.com/images/close2.gif";
    closeX.style.float='right'
    closeX.onclick = closeInfoWindow;

    top.appendChild(titleD);
    top.appendChild(closeX);
    info.appendChild(top);

    // 定义中部内容
    var middle = document.createElement("div");
    middle.className = "info-middle";
    middle.style.backgroundColor = '';
    middle.innerHTML = cont;
    info.appendChild(middle);

    // 定义底部内容
    var bottom = document.createElement("div");
    bottom.className = "info-bottom";
    bottom.style.position = 'relative';
    bottom.style.top = '0px';
    bottom.style.margin = '0 auto';
    var sharp = document.createElement("img");
    sharp.src = "";
    bottom.appendChild(sharp);
    info.appendChild(bottom);
    return info;
}

// 点击关闭信息窗体
function closeInfoWindow() {
    map.clearInfoWindow();
}