彈出式視窗

popover 會在地圖上方特定位置的對話方塊中顯示內容 (通常為文字或圖片)。彈出式視窗包含內容區域和錐形柄。錐形柄的尖端會連接地圖上的指定位置。彈出式視窗會以對話方塊的形式顯示在螢幕閱讀器中。

通常您會將彈出式視窗附加至互動式標記，但也可以將彈出式視窗附加至特定 LatLngAltitude 座標，或將彈出式視窗從標記偏移。

新增彈出式視窗

PopoverElement 建構函式會採用 PopoverElementOptions 物件常值，指定用於顯示彈出式視窗的初始參數。

PopoverElementOptions 物件常值包含下列欄位：

  • positionAnchor：要顯示標記的 LatLngAltitude 位置。如果使用標記，系統會改用標記的位置。
  • altitudeMode：如何解讀彈出式視窗的高度。
  • lightDismissDisabled：當使用者點選彈出式視窗外部或按下 Esc 鍵時，彈出式視窗是否會保持開啟狀態。將這個選項設為 true 時，地圖上可以同時顯示多個 lightDismissDisabled 彈出式視窗。
  • open：決定是否應開啟彈出式視窗。預設值為 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();