信息窗口

请选择平台： Android iOS JavaScript
  1. 简介
  2. 添加信息窗口
  3. 打开信息窗口
  4. 关闭信息窗口
  5. 移动信息窗口

简介

InfoWindow 用于在地图上的给定位置以弹出式窗口的形式显示内容（通常为文本或图片）。信息窗口包含一个内容区域和一个锥形柄，柄的尖端与地图上的指定位置相连。信息窗口以对话框的形式显示给屏幕阅读器。

一个信息窗口，其中显示了澳大利亚某个位置的相关信息。

通常情况下，您需要将信息窗口附加到标记，但也可以将信息窗口附加到特定纬度/经度，具体说明见下文中的“添加信息窗口”部分。

从广义上来讲，信息窗口属于一种叠加层。如需了解其他类型的叠加层，请参阅在地图上绘图。

添加信息窗口

InfoWindow 构造函数采用 InfoWindowOptions 对象字面量作为参数，该对象字面量用于指定用来显示信息窗口的初始参数。

InfoWindowOptions 对象字面量包含下列字段：

  • content，包含要在信息窗口中显示的文本字符串或 DOM 节点。
  • pixelOffset，包含从信息窗口尖端到信息窗口锚定位置的偏移量。在实际使用时，您不必指定此字段，可以保留其默认值。
  • position，包含此信息窗口锚定位置的 LatLng。注意：InfoWindow 可以附加到一个 Marker 对象（在此情况下，信息窗口的位置取决于标记的位置），也可附加到地图本身上的指定 LatLng 位置。若要获取 LatLng，一种方式是使用地理编码服务。在标记上打开信息窗口后，系统会自动更新 position。
  • maxWidth，用于指定信息窗口的最大宽度（以像素为单位）。默认情况下，信息窗口会根据其中包含的内容进行扩展，如果信息窗口填满地图，文本将会自动换行。如果您添加 maxWidth，信息窗口将会自动换行以强制适应指定宽度。如果信息窗口达到最大宽度，但屏幕上仍有纵向空间，信息窗口可能会纵向扩展。

InfoWindow 的内容可包含文本字符串、HTML 代码段或 DOM 元素。若要设置具体包含的内容，可以在 InfoWindowOptions 中指定相应内容，或者对 InfoWindow 显式调用 setContent()。

如果您想要显式指定内容的大小，可以将内容放入 <div> 元素中，并使用 CSS 设置 <div> 的样式。您还可以使用 CSS 启用滚动功能。请注意，如果您不启用滚动功能，且内容超出信息窗口中可用的空间，内容可能会溢出信息窗口。

打开信息窗口

创建信息窗口后，它不会自动显示在地图上。若要显示信息窗口，您必须对 InfoWindow 调用 open() 方法，并传递 InfoWindowOpenOptions 对象字面量来指定以下选项：

  • map 用于指定要在哪张地图或街景全景图片上打开信息窗口。
  • anchor 包含一个定位点（例如 Marker）。如果 anchor 选项为 null 或未指定，信息窗口将在其 position 属性对应的位置打开。

TypeScript

// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.

function initMap(): void {
  const uluru = { lat: -25.363, lng: 131.044 };
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: uluru,
    }
  );

  const contentString =
    '<div id="content">' +
    '<div id="siteNotice">' +
    "</div>" +
    '<h1 id="firstHeading" class="firstHeading">Uluru</h1>' +
    '<div id="bodyContent">' +
    "<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large " +
    "sandstone rock formation in the southern part of the " +
    "Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) " +
    "south west of the nearest large town, Alice Springs; 450&#160;km " +
    "(280&#160;mi) by road. Kata Tjuta and Uluru are the two major " +
    "features of the Uluru - Kata Tjuta National Park. Uluru is " +
    "sacred to the Pitjantjatjara and Yankunytjatjara, the " +
    "Aboriginal people of the area. It has many springs, waterholes, " +
    "rock caves and ancient paintings. Uluru is listed as a World " +
    "Heritage Site.</p>" +
    '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' +
    "https://en.wikipedia.org/w/index.php?title=Uluru</a> " +
    "(last visited June 22, 2009).</p>" +
    "</div>" +
    "</div>";

  const infowindow = new google.maps.InfoWindow({
    content: contentString,
    ariaLabel: "Uluru",
  });

  const marker = new google.maps.Marker({
    position: uluru,
    map,
    title: "Uluru (Ayers Rock)",
  });

  marker.addListener("click", () => {
    infowindow.open({
      anchor: marker,
      map,
    });
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.
function initMap() {
  const uluru = { lat: -25.363, lng: 131.044 };
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: uluru,
  });
  const contentString =
    '<div id="content">' +
    '<div id="siteNotice">' +
    "</div>" +
    '<h1 id="firstHeading" class="firstHeading">Uluru</h1>' +
    '<div id="bodyContent">' +
    "<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large " +
    "sandstone rock formation in the southern part of the " +
    "Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) " +
    "south west of the nearest large town, Alice Springs; 450&#160;km " +
    "(280&#160;mi) by road. Kata Tjuta and Uluru are the two major " +
    "features of the Uluru - Kata Tjuta National Park. Uluru is " +
    "sacred to the Pitjantjatjara and Yankunytjatjara, the " +
    "Aboriginal people of the area. It has many springs, waterholes, " +
    "rock caves and ancient paintings. Uluru is listed as a World " +
    "Heritage Site.</p>" +
    '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' +
    "https://en.wikipedia.org/w/index.php?title=Uluru</a> " +
    "(last visited June 22, 2009).</p>" +
    "</div>" +
    "</div>";
  const infowindow = new google.maps.InfoWindow({
    content: contentString,
    ariaLabel: "Uluru",
  });
  const marker = new google.maps.Marker({
    position: uluru,
    map,
    title: "Uluru (Ayers Rock)",
  });

  marker.addListener("click", () => {
    infowindow.open({
      anchor: marker,
      map,
    });
  });
}

window.initMap = initMap;
index.js
查看示例

试用示例

以下示例设置了信息窗口的 maxWidth：查看示例。

将焦点置于信息窗口中

如需将焦点置于信息窗口中，请调用其 focus() 方法。在设置焦点之前，不妨考虑将此方法与 visible 事件搭配使用。对不显示的信息窗口调用此方法不会产生任何效果。调用 open() 即可显示信息窗口。

关闭信息窗口

默认情况下，信息窗口保持打开状态，直至用户点击关闭控件（信息窗口右上角的叉号）或按下 Esc 键。您还可以通过调用信息窗口的 close() 方法来显式关闭它。

关闭信息窗口后，焦点会移回到在信息窗口打开前焦点所在的元素。如果该元素已消失，焦点会移回到地图上。如需重写此行为，您可以监听 closeclick 事件并手动管理焦点，如下例中所示：

infoWindow.addListener('closeclick', ()=>{
  // Handle focus manually.
});

移动信息窗口

可以通过以下两种方式更改信息窗口的位置：

  • 对信息窗口调用 setPosition()，或者
  • 使用 InfoWindow.open() 方法将信息窗口附加到新标记。注意：如果您调用 open() 而不传递标记，InfoWindow 将使用构造时通过 InfoWindowOptions 对象字面量指定的位置。

自定义

InfoWindow 类不提供自定义功能。如需了解如何创建完全自定义的弹出式窗口，请参阅自定义弹出式窗口示例。