弹出式窗口

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

通常，您需要将弹出式窗口附加到交互式标记，但也可以将弹出式窗口附加到特定的 LatLngAltitude 坐标，或将其从标记偏移。

添加弹出式窗口

PopoverElement 构造函数采用 PopoverElementOptions 对象字面量作为参数，该对象字面量用于指定用来显示弹出式窗口的初始参数。

PopoverElementOptions 对象字面量包含以下字段：

  • positionAnchor：用于显示标记的 LatLngAltitude 位置。如果使用标记，系统会改用标记的位置。
  • altitudeMode：如何解读弹出式窗口的海拔。
  • lightDismissDisabled：当用户点击 popover 外部或按 Esc 键时，popover 是否保持打开状态。将此选项设置为 true 时，地图上可以同时显示多个 lightDismissDisabled 弹出式窗口。
  • open：决定是否应打开 popover。默认值为 false。

PopoverElement 的内容可包含文本字符串、HTML 代码段或 DOM 元素。您可以通过在 header 或 default 槽中将内容明确附加到 PopoverElement 来设置内容。

如果您想要显式指定内容的大小，可以将内容放入 <div> 元素中，并使用 CSS 设置 <div> 的样式。默认情况下，弹出式窗口可滚动，并且具有预定义的最大高度。

将弹出式窗口锚定到 LatLngAltitude 坐标

创建弹出式窗口后，它不会自动显示在地图上。如需让该弹出式窗口可见，您必须在 PopoverElement 中将 open 选项设置为 true。您可以在构建期间或实例化后执行此操作。

async function init() {
    const { AltitudeMode, Map3DElement, MapMode, PopoverElement } = await google.maps.importLibrary("maps3d");
    const map = new Map3DElement({
        center: { lat: 37.8204, lng: -122.4783, altitude: 0.407 }, range: 4000, tilt: 74, heading: 38,
        mode: MapMode.HYBRID,
    });
    const popover = new PopoverElement({
        altitudeMode: AltitudeMode.ABSOLUTE,
        open: true,
        positionAnchor: { lat: 37.819852, lng: -122.478549, altitude: 150 },
    });
    popover.append('Golden Gate Bridge');
    map.append(popover);
    document.body.append(map);
}
init();
index.js

将弹出式窗口锚定到标记

您可以将弹出式窗口锚定到标记。添加锚定到标记的弹出式窗口时，您需要设置 PopoverElement.positionAnchor 选项以使用该标记。

async function init() {
    const { AltitudeMode, Map3DElement, Marker3DInteractiveElement, MapMode, PopoverElement } = await google.maps.importLibrary("maps3d");
    const map = new Map3DElement({
        center: { lat: 37.8204, lng: -122.4783, altitude: 0.407 }, range: 4000, tilt: 74, heading: 38,
        mode: MapMode.HYBRID,
    });
    // Popovers can only be added to interactive Markers
    const interactiveMarker = new Marker3DInteractiveElement({
        altitudeMode: AltitudeMode.ABSOLUTE,
        position: { lat: 37.819852, lng: -122.478549, altitude: 100 }
    });
    const popover = new PopoverElement({
        open: false,
        positionAnchor: interactiveMarker,
    });
    popover.append('Golden Gate Bridge');
    interactiveMarker.addEventListener('gmp-click', (event) => {
        // toggle the marker to the other state (unlee you are clicking on the marker itself when it reopens it)
        popover.open = !popover.open;
    });
    map.append(interactiveMarker);
    map.append(popover);
    document.body.append(map);
}
init();
index.js

使用 HTML 将弹出式窗口锚定到标记

您还可以将弹出式窗口锚定到标记，而无需编写任何 JavaScript 代码，如下所示：

<gmp-map-3d mode="hybrid" center="37.819852,-122.478549" tilt="75" range="2000" heading="330">
  <gmp-marker-3d-interactive gmp-popover-target="my-popover" position="37.819852,-122.478549,100"></gmp-marker-3d-interactive>
  <gmp-popover id="my-popover">
    Golden Gate Bridge
  </gmp-popover>
</gmp-map-3d>
<script async src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDGl0teQ6qwaBEdHazOWIEXd8XGWOZvoaM&v=beta&libraries=maps3d">
</script>

向弹出式窗口添加自定义内容

您可以通过设置 header 和 content 选项，向弹出式窗口添加自定义内容：

async function init() {
  const {Map3DElement, MapMode, PopoverElement, AltitudeMode} = await google.maps.importLibrary('maps3d');

  const map = new Map3DElement({
    center: { lat: 37.819852, lng: -122.478549, altitude: 2000 },
    tilt: 75,
    heading: 330,
    mode: MapMode.SATELLITE,
  });

  const popover = new PopoverElement({
    altitudeMode: AltitudeMode.ABSOLUTE,
    open: true,
    positionAnchor: {lat: 37.819852, lng: -122.478549, altitude: 100},
  });

  const header = document.createElement('div');
  header.style.fontWeight = 'bold';
  header.slot = 'header';
  header.textContent = 'Golden Gate Bridge';
  const content = document.createElement('div');
  content.textContent = 'Iconic orange bridge connecting San Francisco to Marin.';

  popover.append(header);
  popover.append(content);

  document.body.append(map);
  map.append(popover);
}

init();