Cửa sổ bật lên

popoverhiể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 cuống thon. Đầu của cuống được gắn vào một vị trí cụ thể trên bản đồ. Popover 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ẽ đính kèm một cửa sổ bật lên vào một interactive marker (điểm đánh dấu có thể 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ổ đó 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, chỉ định các tham số ban đầu để hiển thị cửa sổ bật lên.

Giá trị cố định đối tượng PopoverElementOptions chứa các trường sau:

  • positionAnchor: Vị trí LatLngAltitude mà bạn muốn hiển thị điểm đánh dấu. Nếu bạn dùng một đ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: 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ổ đó hoặc 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: Quyết định xem 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 nối nội dung đó vào PopoverElement một cách rõ ràng trong vị trí 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 đó trong một phần tử <div> và tạo kiểu cho <div> bằng CSS. Theo mặc định, các 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.

Đặt cố định một 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ổ này 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 lựa 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 khởi tạo.

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

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

Bạn có thể cố định chú thích bật lên vào các điểm đánh dấu. Khi thêm một cửa sổ bật lên được neo vào một điểm đánh dấu, bạn sẽ đặt lựa 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,
    });
    // 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

Liên kết một cửa sổ bật lên với một điểm đánh dấu bằng HTML

Bạn cũng có thể liên kết các cửa sổ bật lên với các đ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 lựa 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();