信息窗体 (InfoWindow)

信息窗体用于在地图上弹出一个浮层，展示详细信息。它可以绑定到特定位置或覆盖物上。

基础用法

// 1. 创建信息窗体
const infoWindow = new AMap.InfoWindow({
    content: '<h4>标题</h4><div>这是信息窗体的内容</div>', // 支持 HTML 字符串或 DOM 元素
    anchor: 'bottom-center', // 锚点位置: top-left, top-center, top-right, middle-left, center, middle-right, bottom-left, bottom-center, bottom-right
    offset: new AMap.Pixel(0, -30), // 偏移量，避免遮挡标记
    isCustom: false, // 是否自定义外观 (设为 true 则不显示默认边框和关闭按钮)
    autoMove: true, // 是否自动调整地图视野使窗体可见
    closeWhenClickMap: true, // 点击地图其他空白处关闭窗体
});

// 2. 打开信息窗体
infoWindow.open(map, [116.397, 39.909]); // 在指定位置打开

// 或者绑定点击事件
marker.on('click', function(e) {
    infoWindow.open(map, e.target.getPosition());
});

自定义样式

如果将 isCustom 设为 true，则可以完全控制窗体的外观。

const customInfoWindow = new AMap.InfoWindow({
    isCustom: true,
    content: createCustomContent(), // 返回一个 DOM 元素
    offset: new AMap.Pixel(16, -45)
});

function createCustomContent() {
    const div = document.createElement('div');
    div.className = 'my-info-window';
    div.innerHTML = `
        <div class="info-title">高德地图</div>
        <div class="info-body">自定义样式的窗体</div>
        <button onclick="closeInfoWindow()">关闭</button>
    `;
    return div;
}

// 需要手动实现关闭逻辑
window.closeInfoWindow = function() {
    map.clearInfoWindow();
}

更新内容

infoWindow.setContent('<div>新的内容</div>');
infoWindow.setPosition([116.40, 39.90]);

配置项

参数	类型	默认值	说明
content	String/HTMLElement	-	内容，支持 HTML 字符串或 DOM 元素
anchor	String	'bottom-center'	锚点位置
offset	Pixel	-	偏移量
isCustom	Boolean	false	是否自定义样式
autoMove	Boolean	false	是否自动调整地图视野
closeWhenClickMap	Boolean	false	点击地图其他区域是否关闭
size	Size	-	窗体大小
avoid	Array	-	避让的像素区域

锚点位置 (anchor)

top-left - 左上
top-center - 上中
top-right - 右上
middle-left - 左中
center - 中心
middle-right - 右中
bottom-left - 左下
bottom-center - 下中（默认）
bottom-right - 右下

与标记配合使用

const marker = new AMap.Marker({
  position: [116.397, 39.909],
  title: '点击查看详情'
});
map.add(marker);

const infoWindow = new AMap.InfoWindow({
  content: '<div>POI 详情信息</div>',
  offset: new AMap.Pixel(0, -30)
});

marker.on('click', function(e) {
  infoWindow.open(map, e.target.getPosition());
});

自定义样式

设置 isCustom: true 完全控制窗体外观：

const customInfoWindow = new AMap.InfoWindow({
  isCustom: true,
  content: createCustomContent(),
  offset: new AMap.Pixel(16, -45)
});

function createCustomContent() {
  const div = document.createElement('div');
  div.className = 'custom-info-window';
  div.innerHTML = `
    <div class="info-header">
      <span class="info-title">高德地图</span>
      <span class="info-close" onclick="closeInfoWindow()">×</span>
    </div>
    <div class="info-body">
      <p>自定义样式的信息窗体</p>
      <button onclick="doSomething()">操作按钮</button>
    </div>
    <div class="info-arrow"></div>
  `;
  return div;
}

// 全局关闭方法
window.closeInfoWindow = function() {
  map.clearInfoWindow();
};

自定义样式 CSS

.custom-info-window {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  min-width: 200px;
  position: relative;
}

.info-header {
  background: linear-gradient(135deg, #1890ff, #096dd9);
  color: #fff;
  padding: 12px 16px;
  border-radius: 8px 8px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info-title {
  font-weight: 600;
}

.info-close {
  cursor: pointer;
  font-size: 18px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.info-close:hover {
  background: rgba(255,255,255,0.2);
}

.info-body {
  padding: 16px;
}

.info-arrow {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #fff;
}

动态更新内容

// 更新内容
infoWindow.setContent('<div>新的内容</div>');

// 更新位置
infoWindow.setPosition([116.40, 39.90]);

// 获取当前位置
const position = infoWindow.getPosition();

// 获取是否打开
const isOpen = infoWindow.getIsOpen();

事件监听

infoWindow.on('open', function() {
  console.log('信息窗体已打开');
});

infoWindow.on('close', function() {
  console.log('信息窗体已关闭');
});

infoWindow.on('change', function() {
  console.log('信息窗体内容或位置已改变');
});

完整示例

const map = new AMap.Map('container', {
  zoom: 14,
  center: [116.397, 39.909]
});

// POI 数据
const pois = [
  { name: '天安门', address: '北京市东城区', position: [116.397428, 39.90923] },
  { name: '故宫', address: '北京市东城区景山前街4号', position: [116.397026, 39.918058] },
  { name: '王府井', address: '北京市东城区', position: [116.410904, 39.913904] }
];

// 创建信息窗体
const infoWindow = new AMap.InfoWindow({
  isCustom: true,
  offset: new AMap.Pixel(0, -40)
});

// 添加标记
pois.forEach(poi => {
  const marker = new AMap.Marker({
    position: poi.position,
    title: poi.name
  });
  
  marker.on('click', function(e) {
    const content = `
      <div class="poi-info-window">
        <div class="poi-header">
          <h3>${poi.name}</h3>
          <span class="close-btn" onclick="map.clearInfoWindow()">×</span>
        </div>
        <div class="poi-body">
          <p>${poi.address}</p>
          <div class="poi-actions">
            <button onclick="navigateTo(${poi.position[0]}, ${poi.position[1]})">导航</button>
            <button onclick="shareLocation('${poi.name}')">分享</button>
          </div>
        </div>
      </div>
    `;
    
    infoWindow.setContent(content);
    infoWindow.open(map, e.target.getPosition());
  });
  
  map.add(marker);
});

// 全局方法
window.navigateTo = function(lng, lat) {
  console.log('导航到:', lng, lat);
};

window.shareLocation = function(name) {
  console.log('分享位置:', name);
};

关闭信息窗体

// 方式一：调用 close 方法
infoWindow.close();

// 方式二：清除地图上的信息窗体
map.clearInfoWindow();

注意事项

同时只能打开一个: 地图上同时只能打开一个信息窗体
自定义样式: isCustom: true 时不显示默认的边框和关闭按钮
偏移量: 根据标记图标大小调整 offset，避免遮挡
自动调整: autoMove: true 可以自动调整地图视野使窗体可见
事件冒泡: 窗体内的点击事件需要阻止冒泡，否则可能触发地图点击事件

7.4 KiB Raw Blame History Unescape Escape

信息窗体 (InfoWindow)

基础用法

自定义样式

更新内容

配置项

锚点位置 (anchor)

与标记配合使用

自定义样式

自定义样式 CSS

动态更新内容

事件监听

完整示例

关闭信息窗体

注意事项

7.4 KiB

Raw Blame History