Android谷歌地图：如何将自定义信息窗口置于标记下方

嘿，我来帮你搞定Info Window放在Marker下方的需求！下面分两种常见实现方式说明，还会附上类封装的写法，方便你复用~

方式一：利用官方API的偏移属性（以Google Maps为例） #

大部分地图API（比如Google Maps）都提供了调整Info Window位置的参数，核心就是通过偏移量让窗口从默认的Marker上方移到下方：

// 先创建标记
const marker = new google.maps.Marker({
  position: 你的经纬度坐标,
  map: 你的地图实例,
  title: "标记标题"
});

// 创建信息窗口，重点设置偏移
const infoWindow = new google.maps.InfoWindow({
  content: "<div>这里是信息窗口的内容</div>",
  // pixelOffset第二个参数设为正数，就是向下偏移的像素值，根据你的Marker图标大小调整
  pixelOffset: new google.maps.Size(0, 40) 
});

// 绑定标记的点击事件，点击打开信息窗口
marker.addListener("click", () => {
  infoWindow.open(map, marker);
});

这个方法最简单，只需要调整偏移数值就能精准控制窗口位置，适合不需要高度定制样式的场景。

方式二：自定义Info Window（更灵活的样式控制） #

如果想要自定义窗口的形状、箭头样式，完全可以自己写HTML+CSS来实现，再通过JS关联到Marker：

1. 写自定义窗口的HTML结构 #

<div class="custom-info-window" style="display: none;">
  <div class="info-content">
    <h4>自定义标题</h4>
    <p>这里是详细信息内容</p>
  </div>
  <!-- 加个小箭头指向Marker -->
  <div class="info-arrow"></div>
</div>

2. 用CSS控制位置和样式 #

.custom-info-window {
  position: absolute;
  background: #fff;
  padding: 12px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  z-index: 999;
}

/* 箭头样式，指向下方的Marker */
.info-arrow {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #fff;
}

3. JS绑定Marker和自定义窗口 #

marker.addListener("click", () => {
  // 获取Marker在页面上的像素位置
  const markerPixel = map.getProjection().fromLatLngToDivPixel(marker.getPosition());
  const infoWindow = document.querySelector('.custom-info-window');
  
  // 设置窗口位置，让它刚好在Marker下方
  infoWindow.style.top = `${markerPixel.y + 10}px`;
  infoWindow.style.left = `${markerPixel.x - infoWindow.offsetWidth/2}px`;
  infoWindow.style.display = 'block';
});

关联到类的封装实现 #

如果项目里有多个Marker需要复用这个逻辑，把它封装成类会更方便维护：

class CustomMapMarker {
  constructor(map, latLng, infoContent) {
    this.map = map;
    this.latLng = latLng;
    this.infoContent = infoContent;
    this.marker = null;
    this.infoWindow = null;
    
    this.initMarker();
    this.initInfoWindow();
    this.bindEvents();
  }

  // 初始化Marker
  initMarker() {
    this.marker = new google.maps.Marker({
      position: this.latLng,
      map: this.map
    });
  }

  // 初始化带偏移的Info Window
  initInfoWindow() {
    this.infoWindow = new google.maps.InfoWindow({
      content: this.infoContent,
      pixelOffset: new google.maps.Size(0, 40)
    });
  }

  // 绑定点击事件
  bindEvents() {
    this.marker.addListener('click', () => {
      this.infoWindow.open(this.map, this.marker);
    });
  }

  // 可选：添加关闭窗口的方法
  closeInfoWindow() {
    this.infoWindow.close();
  }
}

// 使用示例
const myMarker = new CustomMapMarker(
  mapInstance,
  new google.maps.LatLng(37.7749, -122.4194),
  "<div>我的自定义信息内容</div>"
);

这样所有Marker的逻辑都封装在CustomMapMarker类里，想创建新的带下方Info Window的Marker，直接实例化类就行啦~

内容的提问来源于stack exchange，提问作者Pavlo Kravchenko