บทนำ
การวางซ้อนเป็นวัตถุบนแผนที่ที่เชื่อมโยงกับพิกัดละติจูด/ลองจิจูด ดังนั้นจะเคลื่อนไหวเมื่อคุณลากหรือซูมแผนที่ หากต้องการวางรูปภาพลงในแผนที่ คุณใช้ออบเจ็กต์ GroundOverlay
ได้
ดูข้อมูลเกี่ยวกับการวางซ้อนประเภทอื่นๆ ได้ที่ภาพวาดบนแผนที่
เพิ่มการวางซ้อนพื้น
เครื่องมือสร้างสําหรับ GroundOverlay
ระบุ URL ของรูปภาพและ LatLngBounds
ของรูปภาพเป็นพารามิเตอร์ รูปภาพจะแสดงในแผนที่ ถูกจํากัดตามขอบเขตที่ระบุ และสอดคล้องกับการคาดการณ์แผนที่
TypeScript
// This example uses a GroundOverlay to place an image on the map // showing an antique map of Newark, NJ. let historicalOverlay; function initMap(): void { const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 13, center: { lat: 40.74, lng: -74.18 }, } ); const imageBounds = { north: 40.773941, south: 40.712216, east: -74.12544, west: -74.22655, }; historicalOverlay = new google.maps.GroundOverlay( "https://storage.googleapis.com/geo-devrel-public-buckets/newark_nj_1922-661x516.jpeg", imageBounds ); historicalOverlay.setMap(map); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
// This example uses a GroundOverlay to place an image on the map // showing an antique map of Newark, NJ. let historicalOverlay; function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 13, center: { lat: 40.74, lng: -74.18 }, }); const imageBounds = { north: 40.773941, south: 40.712216, east: -74.12544, west: -74.22655, }; historicalOverlay = new google.maps.GroundOverlay( "https://storage.googleapis.com/geo-devrel-public-buckets/newark_nj_1922-661x516.jpeg", imageBounds ); historicalOverlay.setMap(map); } window.initMap = initMap;
ลองใช้ตัวอย่าง
นําการวางซ้อนพื้นออก
หากต้องการนําการวางซ้อนออกจากแผนที่ ให้เรียกใช้เมธอด setMap()
ของการวางซ้อน โดยส่งผ่าน null
โปรดทราบว่าการเรียกใช้วิธีนี้จะไม่ลบการวางซ้อน จะนําการวางซ้อนออกจากแผนที่ หากต้องการลบการวางซ้อน คุณก็ควรนําออกจากแผนที่ แล้วตั้งค่าการวางซ้อนเป็น null
function removeOverlay() { historicalOverlay.setMap(null); }