Cửa sổ bật lên

popover hiển thị nội dung (thường là văn bản hoặc hình ảnh) trong 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 mũi tên nhọn. Đầu của 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 cho trình đọc màn hình.

Thông thường, bạn sẽ đính kèm 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ể đính kèm 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 chữ PopoverElementOptions, chỉ định các tham số ban đầu để hiển thị cửa sổ bật lên.

Đối tượng chữ PopoverElementOptions chứa các trường sau:

  • positionAnchor: Vị trí LatLngAltitude để hiển thị điểm đánh dấu. Nếu bạn sử dụng điểm đánh dấu, thì vị trí của điểm đánh dấu sẽ được dùng thay thế.
  • altitudeMode: Cách diễn giải độ cao của cửa sổ bật lên.
  • lightDismissDisabled: Cho biết liệu cửa sổ bật lên có tiếp tục mở khi người dùng nhấp vào bên ngoài cửa sổ đó hay nhấn phím Esc hay không. Khi bạn đặt tuỳ chọn này 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: Cho biết liệu cửa sổ bật lên có nên 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 thêm nội dung đó vào PopoverElement một cách rõ ràng trong vùng 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 được và có chiều cao tối đa được xác định trước.

Neo 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 đồ. Để làm cho cửa sổ bật lên hiển thị, 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 { Map3DElement, 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: 'HYBRID',
    });

    const popover = new PopoverElement({
        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);
}

void init();

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

Bạn có thể neo 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 liên kết với một đ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 { Map3DElement, Marker3DInteractiveElement, 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: 'HYBRID',
    });

    // Popovers can only be added to interactive Markers
    const interactiveMarker = new Marker3DInteractiveElement({
        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', () => {
        // 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);
}

void init();

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

Bạn cũng có thể neo 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ạ dưới đây:

<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();