ป๊อปอัป

popover แสดงเนื้อหา (โดยปกติจะเป็นข้อความหรือรูปภาพ) ในกล่องโต้ตอบเหนือแผนที่ ณ ตำแหน่งที่ระบุ ป๊อปโอเวอร์มีพื้นที่เนื้อหาและก้านเรียว ปลาย ก้านจะติดอยู่กับตำแหน่งที่ระบุบนแผนที่ ป๊อปโอเวอร์จะปรากฏเป็น กล่องโต้ตอบในโปรแกรมอ่านหน้าจอ

โดยปกติแล้ว คุณจะแนบป๊อปโอเวอร์กับเครื่องหมาย แบบอินเทอร์แอกทีฟ แต่คุณยังแนบป๊อปโอเวอร์กับLatLngAltitudeพิกัดที่เฉพาะเจาะจง หรือ ออฟเซ็ต จากเครื่องหมายได้ด้วย

เพิ่มป๊อปโอเวอร์

ตัวสร้าง PopoverElement จะใช้อักษรPopoverElementOptions ออบเจ็กต์ ซึ่งระบุพารามิเตอร์เริ่มต้นสำหรับการแสดง ป๊อปโอเวอร์

ออบเจ็กต์ลิเทอรัล PopoverElementOptions มีช่องต่อไปนี้

  • positionAnchor: LatLngAltitudeตำแหน่งที่จะแสดงเครื่องหมาย หากใช้เครื่องหมาย ระบบจะใช้ตำแหน่งของเครื่องหมายแทน
  • altitudeMode: วิธีตีความระดับความสูงของป๊อปโอเวอร์
  • lightDismissDisabled: ระบุว่าป๊อปโอเวอร์จะเปิดอยู่เมื่อผู้ใช้คลิก ภายนอกป๊อปโอเวอร์ หรือกดแป้น Esc เมื่อตั้งค่าตัวเลือกนี้เป็น true ป๊อปโอเวอร์ lightDismissDisabled หลายรายการจะแสดงบนแผนที่ พร้อมกันได้
  • open: กำหนดว่าควรเปิดป๊อปโอเวอร์หรือไม่ ค่าเริ่มต้นคือ false

เนื้อหาของ PopoverElement อาจมีสตริงข้อความ ข้อมูลโค้ด HTML หรือองค์ประกอบ DOM คุณตั้งค่าเนื้อหาโดยต่อท้าย PopoverElement อย่างชัดเจนในช่อง header หรือ default

หากต้องการกำหนดขนาดเนื้อหาอย่างชัดเจน คุณสามารถใส่เนื้อหาในองค์ประกอบ <div> และจัดรูปแบบ <div> ด้วย CSS ป๊อปโอเวอร์จะเลื่อนได้โดยค่าเริ่มต้นและมีความสูงสูงสุดที่กำหนดไว้ล่วงหน้า

ยึดป๊อปโอเวอร์กับพิกัด LatLngAltitude

เมื่อสร้างป๊อปโอเวอร์ ระบบจะไม่แสดงป๊อปโอเวอร์บนแผนที่โดยอัตโนมัติ หากต้องการ ให้ป๊อปโอเวอร์แสดง คุณต้องตั้งค่าตัวเลือก open เป็น true ใน PopoverElement คุณดำเนินการนี้ได้ในระหว่างการสร้างหรือหลังจากอินสแตนซ์

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