Cửa sổ bật lên

A popover hiển thị nội dung (thường là văn bản hoặc hình ảnh) trong một cửa sổ hộp thoại phía trên bản đồ, tại một vị trí nhất định. Cửa sổ bật lên có một vùng nội dung và một thân thon. Đầu thân được gắn vào một vị trí được chỉ định trên bản đồ. Cửa sổ bật lên xuất hiện dưới dạng hộp thoại đối với trình đọc màn hình.

Thông thường, bạn sẽ gắn cửa sổ bật lên vào một điểm đánh dấu tương tác, nhưng bạn cũng có thể gắn cửa sổ bật lên vào một toạ độ LatLngAltitude cụ thể hoặc bù trừ cửa sổ bật lên từ một điểm đánh dấu.

Thêm cửa sổ bật lên

Hàm khởi tạo PopoverElement lấy một đối tượng PopoverElementOptions theo nghĩa đen, đối tượng này chỉ định các tham số ban đầu để hiển thị cửa sổ bật lên.

Đối tượng PopoverElementOptions theo nghĩa đen chứa các trường sau:

  • positionAnchor: Vị trí LatLngAltitude để hiển thị điểm đánh dấu. Nếu sử dụng điểm đánh dấu, vị trí của điểm đánh dấu sẽ được dùng.
  • altitudeMode: Cách diễn giải độ cao của cửa sổ bật lên.
  • lightDismissDisabled: Liệu cửa sổ bật lên có mở khi người dùng nhấp vào bên ngoài cửa sổ bật lên hay nhấn phím Esc hay không. Khi tuỳ chọn này được đặt thành true, nhiều cửa sổ bật lên lightDismissDisabled có thể xuất hiện đồng thời trên bản đồ.
  • open: Quyết định xem cửa sổ bật lên có mở hay không. Giá trị mặc định là false.

Nội dung của PopoverElement có thể chứa một chuỗi văn bản, một đoạn mã HTML hoặc một phần tử DOM. Bạn đặt nội dung bằng cách nối nội dung đó vào PopoverElement một cách rõ ràng trong vùng chứa header hoặc default.

Nếu muốn định kích thước nội dung một cách rõ ràng, bạn có thể đặt nội dung đó vào một phần tử <div> và tạo kiểu cho <div> bằng CSS. Theo mặc định, cửa sổ bật lên có thể cuộn và có chiều cao tối đa được xác định trước.

Gắn cửa sổ bật lên vào toạ độ LatLngAltitude

Khi bạn tạo một cửa sổ bật lên, cửa sổ đó sẽ không tự động xuất hiện trên bản đồ. Để hiển thị cửa sổ bật lên, bạn phải đặt tuỳ chọn open thành true trong PopoverElement. Bạn có thể thực hiện thao tác này trong quá trình tạo hoặc sau khi tạo thực thể.

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,
        gestureHandling: 'COOPERATIVE',
    });
    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

Gắn cửa sổ bật lên vào điểm đánh dấu

Bạn có thể gắn cửa sổ bật lên vào điểm đánh dấu. Khi thêm một cửa sổ bật lên được gắn vào điểm đánh dấu, bạn sẽ đặt tuỳ chọn PopoverElement.positionAnchor để sử dụng điểm đánh dấu.

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,
        gestureHandling: 'COOPERATIVE',
    });
    // 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

Gắn cửa sổ bật lên vào điểm đánh dấu bằng HTML

Bạn cũng có thể gắn cửa sổ bật lên vào điểm đánh dấu mà không cần viết mã JavaScript, như minh hoạ bên dưới:

<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>

Thêm nội dung tuỳ chỉnh vào cửa sổ bật lên

Bạn có thể thêm nội dung tuỳ chỉnh vào cửa sổ bật lên bằng cách đặt các tuỳ chọn header và 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();