เกริ่นนำ
การวางซ้อนคือวัตถุบนแผนที่ที่เชื่อมโยงกับพิกัดละติจูด/ลองจิจูด เพื่อให้มีการเคลื่อนที่เมื่อคุณลากหรือซูมแผนที่ สำหรับข้อมูลเกี่ยวกับประเภทการวางซ้อนที่กำหนดไว้ล่วงหน้า โปรดดูภาพวาดบนแผนที่
Maps JavaScript API มีคลาส OverlayView
สำหรับสร้างการวางซ้อนที่กำหนดเอง OverlayView
เป็นคลาสพื้นฐานที่มีวิธีการมากมายที่คุณต้องใช้เมื่อสร้างการวางซ้อน คลาสนี้ยังบอกวิธีการบางส่วนที่จะช่วยให้สามารถแปลไปมาระหว่างพิกัดบนหน้าจอและตำแหน่งบนแผนที่ได้
เพิ่มการวางซ้อนที่กำหนดเอง
สรุปขั้นตอนที่จำเป็นในการสร้างการวางซ้อนที่กำหนดเองมีดังนี้
- ตั้งค่า
prototype
ของออบเจ็กต์ซ้อนทับที่กำหนดเองเป็นอินสแตนซ์ใหม่ของgoogle.maps.OverlayView()
นี่จะเป็นคลาสย่อยของคลาสการวางซ้อน - สร้างเครื่องมือสร้างสำหรับการวางซ้อนที่กำหนดเอง และตั้งค่าพารามิเตอร์การเริ่มต้น
- ใช้เมธอด
onAdd()
ภายในต้นแบบของคุณ แล้วแนบการวางซ้อนกับแผนที่ ระบบจะเรียกOverlayView.onAdd()
เมื่อแผนที่พร้อมให้ การวางซ้อนแนบมา - ใช้เมธอด
draw()
ภายในต้นแบบและจัดการการแสดงภาพของออบเจ็กต์ ระบบจะเรียกใช้OverlayView.draw()
เมื่อออบเจ็กต์แสดงเป็นครั้งแรก - นอกจากนี้คุณยังควรใช้เมธอด
onRemove()
เพื่อล้างองค์ประกอบที่คุณเพิ่มในการวางซ้อนด้วย
ด้านล่างนี้คือรายละเอียดของแต่ละขั้นตอน คุณสามารถดูโค้ดตัวอย่างที่สมบูรณ์ ซึ่งใช้งานได้ดังนี้: ดูตัวอย่างโค้ด
คลาสย่อยของการวางซ้อน
ตัวอย่างด้านล่างใช้ OverlayView
เพื่อสร้างการซ้อนทับรูปภาพอย่างง่าย
ตอนนี้เราจะสร้างตัวสร้างสำหรับคลาส USGSOverlay
และเริ่มต้นพารามิเตอร์ที่ส่งผ่านเป็นคุณสมบัติของออบเจ็กต์ใหม่
TypeScript
/** * The custom USGSOverlay object contains the USGS image, * the bounds of the image, and a reference to the map. */ class USGSOverlay extends google.maps.OverlayView { private bounds: google.maps.LatLngBounds; private image: string; private div?: HTMLElement; constructor(bounds: google.maps.LatLngBounds, image: string) { super(); this.bounds = bounds; this.image = image; }
JavaScript
/** * The custom USGSOverlay object contains the USGS image, * the bounds of the image, and a reference to the map. */ class USGSOverlay extends google.maps.OverlayView { bounds; image; div; constructor(bounds, image) { super(); this.bounds = bounds; this.image = image; }
เราไม่สามารถแนบการวางซ้อนนี้ลงในแผนที่ในตัวสร้างของการวางซ้อนได้ ก่อนอื่น เราต้องแน่ใจว่ามีช่องของแผนที่ทั้งหมด เพราะจะบอกลำดับการแสดงวัตถุบนแผนที่ API มีเมธอดที่ช่วยระบุว่าเกิดเหตุการณ์นี้ขึ้น เราจะจัดการวิธีการนั้นในส่วนถัดไป
เริ่มต้นการวางซ้อน
เมื่อการวางซ้อนสร้างขึ้นเป็นครั้งแรกและพร้อมที่จะแสดง เราจำเป็นต้องแนบการวางซ้อนนั้นเข้ากับแผนที่ผ่าน DOM ของเบราว์เซอร์ API ระบุว่ามีการเพิ่มการวางซ้อนลงในแผนที่โดยการเรียกใช้เมธอด onAdd()
ของการวางซ้อน ในการจัดการวิธีนี้ เราจะสร้าง <div>
เพื่อเก็บรูปภาพของเรา เพิ่มองค์ประกอบ <img>
แนบกับ <div>
จากนั้นแนบการวางซ้อนกับบานหน้าต่างหนึ่งของแผนที่ แผงคือโหนดภายในแผนผัง DOM
แผงประเภท MapPanes
จะระบุลำดับการซ้อนของเลเยอร์ต่างๆ บนแผนที่ แผงต่อไปนี้พร้อมใช้งานและแจกแจงตามลำดับที่เรียงซ้อนกันจากล่างขึ้นบน
mapPane
คือแผงที่ต่ำที่สุดและอยู่เหนือไทล์ และอาจไม่ได้รับเหตุการณ์ DOM (Pane 0)overlayLayer
ประกอบด้วยเส้นประกอบ รูปหลายเหลี่ยม การวางซ้อนพื้น และการวางซ้อนเลเยอร์ของชิ้นส่วนแผนที่ และอาจไม่ได้รับเหตุการณ์ DOM (ข้อ 1)markerLayer
มีเครื่องหมาย และอาจไม่ได้รับเหตุการณ์ DOM (ข้อ 2)overlayMouseTarget
มีองค์ประกอบที่ได้รับเหตุการณ์ DOM (ข้อ 3)floatPane
จะมีหน้าต่างข้อมูล โดยวางอยู่เหนือการวางซ้อนแผนที่ทั้งหมด (Pane 4)
เนื่องจากภาพของเราเป็น "การวางซ้อนพื้น" เราจึงจะใช้แผง overlayLayer
เมื่อมีบานหน้าต่างนี้ เราจะแนบออบเจ็กต์ของเราเข้ากับช่องย่อย
TypeScript
/** * onAdd is called when the map's panes are ready and the overlay has been * added to the map. */ onAdd() { this.div = document.createElement("div"); this.div.style.borderStyle = "none"; this.div.style.borderWidth = "0px"; this.div.style.position = "absolute"; // Create the img element and attach it to the div. const img = document.createElement("img"); img.src = this.image; img.style.width = "100%"; img.style.height = "100%"; img.style.position = "absolute"; this.div.appendChild(img); // Add the element to the "overlayLayer" pane. const panes = this.getPanes()!; panes.overlayLayer.appendChild(this.div); }
JavaScript
/** * onAdd is called when the map's panes are ready and the overlay has been * added to the map. */ onAdd() { this.div = document.createElement("div"); this.div.style.borderStyle = "none"; this.div.style.borderWidth = "0px"; this.div.style.position = "absolute"; // Create the img element and attach it to the div. const img = document.createElement("img"); img.src = this.image; img.style.width = "100%"; img.style.height = "100%"; img.style.position = "absolute"; this.div.appendChild(img); // Add the element to the "overlayLayer" pane. const panes = this.getPanes(); panes.overlayLayer.appendChild(this.div); }
วาดการวางซ้อน
โปรดทราบว่าเราไม่ได้เรียกใช้การแสดงภาพพิเศษใดๆ ในโค้ดข้างต้น API จะเรียกใช้เมธอด draw()
แยกต่างหากในการวางซ้อนทุกครั้งที่ต้องวาดการวางซ้อนบนแผนที่ รวมถึงเมื่อเพิ่มเป็นครั้งแรก
ดังนั้น เราจะใช้เมธอด draw()
นี้โดยเรียก MapCanvasProjection
ของการวางซ้อนโดยใช้ getProjection()
และคำนวณพิกัดที่แน่นอนที่จะยึดตำแหน่งขวาบนและด้านล่างซ้ายของวัตถุ
จากนั้น จึงจะปรับขนาด <div>
ได้ ซึ่งจะปรับขนาดภาพให้ตรงกับ
ขอบเขตที่เราระบุไว้ในตัวสร้างของการวางซ้อน
TypeScript
draw() { // We use the south-west and north-east // coordinates of the overlay to peg it to the correct position and size. // To do this, we need to retrieve the projection from the overlay. const overlayProjection = this.getProjection(); // Retrieve the south-west and north-east coordinates of this overlay // in LatLngs and convert them to pixel coordinates. // We'll use these coordinates to resize the div. const sw = overlayProjection.fromLatLngToDivPixel( this.bounds.getSouthWest() )!; const ne = overlayProjection.fromLatLngToDivPixel( this.bounds.getNorthEast() )!; // Resize the image's div to fit the indicated dimensions. if (this.div) { this.div.style.left = sw.x + "px"; this.div.style.top = ne.y + "px"; this.div.style.width = ne.x - sw.x + "px"; this.div.style.height = sw.y - ne.y + "px"; } }
JavaScript
draw() { // We use the south-west and north-east // coordinates of the overlay to peg it to the correct position and size. // To do this, we need to retrieve the projection from the overlay. const overlayProjection = this.getProjection(); // Retrieve the south-west and north-east coordinates of this overlay // in LatLngs and convert them to pixel coordinates. // We'll use these coordinates to resize the div. const sw = overlayProjection.fromLatLngToDivPixel( this.bounds.getSouthWest(), ); const ne = overlayProjection.fromLatLngToDivPixel( this.bounds.getNorthEast(), ); // Resize the image's div to fit the indicated dimensions. if (this.div) { this.div.style.left = sw.x + "px"; this.div.style.top = ne.y + "px"; this.div.style.width = ne.x - sw.x + "px"; this.div.style.height = sw.y - ne.y + "px"; } }
นำการวางซ้อนที่กำหนดเองออก
เรายังเพิ่มเมธอด onRemove()
เพื่อลบการวางซ้อนออกจากแผนที่อย่างชัดเจน
TypeScript
/** * The onRemove() method will be called automatically from the API if * we ever set the overlay's map property to 'null'. */ onRemove() { if (this.div) { (this.div.parentNode as HTMLElement).removeChild(this.div); delete this.div; } }
JavaScript
/** * The onRemove() method will be called automatically from the API if * we ever set the overlay's map property to 'null'. */ onRemove() { if (this.div) { this.div.parentNode.removeChild(this.div); delete this.div; } }
ซ่อนและแสดงการวางซ้อนที่กำหนดเอง
หากต้องการซ่อนหรือแสดงโฆษณาซ้อนทับมากกว่าเพียงแค่สร้างหรือนำโฆษณาซ้อนทับออก คุณสามารถใช้เมธอด hide()
และ show()
ของคุณเองเพื่อปรับการเปิดเผยของโฆษณาซ้อนทับได้ หรือคุณสามารถถอดการวางซ้อนออกจาก DOM ของแผนที่ได้ แม้ว่าการดำเนินการนี้จะมีราคาแพงกว่าเล็กน้อย โปรดทราบว่าถ้าคุณแนบการวางซ้อนกับ DOM ของแผนที่อีกครั้ง จะเป็นการเรียกใช้เมธอด onAdd()
ของการวางซ้อนอีกครั้ง
ตัวอย่างต่อไปนี้เพิ่มเมธอด hide()
และ show()
ลงในต้นแบบของโฆษณาซ้อนทับ ซึ่งจะสลับการเปิดเผยของคอนเทนเนอร์ <div>
นอกจากนี้ เรายังเพิ่มเมธอด toggleDOM()
ซึ่งจะแนบหรือปลดการวางซ้อนออกจาก/ออกจากแผนที่
TypeScript
/** * Set the visibility to 'hidden' or 'visible'. */ hide() { if (this.div) { this.div.style.visibility = "hidden"; } } show() { if (this.div) { this.div.style.visibility = "visible"; } } toggle() { if (this.div) { if (this.div.style.visibility === "hidden") { this.show(); } else { this.hide(); } } } toggleDOM(map: google.maps.Map) { if (this.getMap()) { this.setMap(null); } else { this.setMap(map); } }
JavaScript
/** * Set the visibility to 'hidden' or 'visible'. */ hide() { if (this.div) { this.div.style.visibility = "hidden"; } } show() { if (this.div) { this.div.style.visibility = "visible"; } } toggle() { if (this.div) { if (this.div.style.visibility === "hidden") { this.show(); } else { this.hide(); } } } toggleDOM(map) { if (this.getMap()) { this.setMap(null); } else { this.setMap(map); } }
เพิ่มตัวควบคุมปุ่ม
ระบบจะเพิ่มตัวควบคุมปุ่มลงในแผนที่เพื่อทริกเกอร์เมธอด toggle
และ toggleDom
TypeScript
const toggleButton = document.createElement("button"); toggleButton.textContent = "Toggle"; toggleButton.classList.add("custom-map-control-button"); const toggleDOMButton = document.createElement("button"); toggleDOMButton.textContent = "Toggle DOM Attachment"; toggleDOMButton.classList.add("custom-map-control-button"); toggleButton.addEventListener("click", () => { overlay.toggle(); }); toggleDOMButton.addEventListener("click", () => { overlay.toggleDOM(map); }); map.controls[google.maps.ControlPosition.TOP_RIGHT].push(toggleDOMButton); map.controls[google.maps.ControlPosition.TOP_RIGHT].push(toggleButton);
JavaScript
const toggleButton = document.createElement("button"); toggleButton.textContent = "Toggle"; toggleButton.classList.add("custom-map-control-button"); const toggleDOMButton = document.createElement("button"); toggleDOMButton.textContent = "Toggle DOM Attachment"; toggleDOMButton.classList.add("custom-map-control-button"); toggleButton.addEventListener("click", () => { overlay.toggle(); }); toggleDOMButton.addEventListener("click", () => { overlay.toggleDOM(map); }); map.controls[google.maps.ControlPosition.TOP_RIGHT].push(toggleDOMButton); map.controls[google.maps.ControlPosition.TOP_RIGHT].push(toggleButton);
โค้ดตัวอย่างที่สมบูรณ์
โปรดดูโค้ดตัวอย่างที่สมบูรณ์ด้านล่างนี้
TypeScript
// This example adds hide() and show() methods to a custom overlay's prototype. // These methods toggle the visibility of the container <div>. // overlay to or from the map. function initMap(): void { const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 11, center: { lat: 62.323907, lng: -150.109291 }, mapTypeId: "satellite", } ); const bounds = new google.maps.LatLngBounds( new google.maps.LatLng(62.281819, -150.287132), new google.maps.LatLng(62.400471, -150.005608) ); // The photograph is courtesy of the U.S. Geological Survey. let image = "https://developers.google.com/maps/documentation/javascript/"; image += "examples/full/images/talkeetna.png"; /** * The custom USGSOverlay object contains the USGS image, * the bounds of the image, and a reference to the map. */ class USGSOverlay extends google.maps.OverlayView { private bounds: google.maps.LatLngBounds; private image: string; private div?: HTMLElement; constructor(bounds: google.maps.LatLngBounds, image: string) { super(); this.bounds = bounds; this.image = image; } /** * onAdd is called when the map's panes are ready and the overlay has been * added to the map. */ onAdd() { this.div = document.createElement("div"); this.div.style.borderStyle = "none"; this.div.style.borderWidth = "0px"; this.div.style.position = "absolute"; // Create the img element and attach it to the div. const img = document.createElement("img"); img.src = this.image; img.style.width = "100%"; img.style.height = "100%"; img.style.position = "absolute"; this.div.appendChild(img); // Add the element to the "overlayLayer" pane. const panes = this.getPanes()!; panes.overlayLayer.appendChild(this.div); } draw() { // We use the south-west and north-east // coordinates of the overlay to peg it to the correct position and size. // To do this, we need to retrieve the projection from the overlay. const overlayProjection = this.getProjection(); // Retrieve the south-west and north-east coordinates of this overlay // in LatLngs and convert them to pixel coordinates. // We'll use these coordinates to resize the div. const sw = overlayProjection.fromLatLngToDivPixel( this.bounds.getSouthWest() )!; const ne = overlayProjection.fromLatLngToDivPixel( this.bounds.getNorthEast() )!; // Resize the image's div to fit the indicated dimensions. if (this.div) { this.div.style.left = sw.x + "px"; this.div.style.top = ne.y + "px"; this.div.style.width = ne.x - sw.x + "px"; this.div.style.height = sw.y - ne.y + "px"; } } /** * The onRemove() method will be called automatically from the API if * we ever set the overlay's map property to 'null'. */ onRemove() { if (this.div) { (this.div.parentNode as HTMLElement).removeChild(this.div); delete this.div; } } /** * Set the visibility to 'hidden' or 'visible'. */ hide() { if (this.div) { this.div.style.visibility = "hidden"; } } show() { if (this.div) { this.div.style.visibility = "visible"; } } toggle() { if (this.div) { if (this.div.style.visibility === "hidden") { this.show(); } else { this.hide(); } } } toggleDOM(map: google.maps.Map) { if (this.getMap()) { this.setMap(null); } else { this.setMap(map); } } } const overlay: USGSOverlay = new USGSOverlay(bounds, image); overlay.setMap(map); const toggleButton = document.createElement("button"); toggleButton.textContent = "Toggle"; toggleButton.classList.add("custom-map-control-button"); const toggleDOMButton = document.createElement("button"); toggleDOMButton.textContent = "Toggle DOM Attachment"; toggleDOMButton.classList.add("custom-map-control-button"); toggleButton.addEventListener("click", () => { overlay.toggle(); }); toggleDOMButton.addEventListener("click", () => { overlay.toggleDOM(map); }); map.controls[google.maps.ControlPosition.TOP_RIGHT].push(toggleDOMButton); map.controls[google.maps.ControlPosition.TOP_RIGHT].push(toggleButton); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
// This example adds hide() and show() methods to a custom overlay's prototype. // These methods toggle the visibility of the container <div>. // overlay to or from the map. function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 11, center: { lat: 62.323907, lng: -150.109291 }, mapTypeId: "satellite", }); const bounds = new google.maps.LatLngBounds( new google.maps.LatLng(62.281819, -150.287132), new google.maps.LatLng(62.400471, -150.005608), ); // The photograph is courtesy of the U.S. Geological Survey. let image = "https://developers.google.com/maps/documentation/javascript/"; image += "examples/full/images/talkeetna.png"; /** * The custom USGSOverlay object contains the USGS image, * the bounds of the image, and a reference to the map. */ class USGSOverlay extends google.maps.OverlayView { bounds; image; div; constructor(bounds, image) { super(); this.bounds = bounds; this.image = image; } /** * onAdd is called when the map's panes are ready and the overlay has been * added to the map. */ onAdd() { this.div = document.createElement("div"); this.div.style.borderStyle = "none"; this.div.style.borderWidth = "0px"; this.div.style.position = "absolute"; // Create the img element and attach it to the div. const img = document.createElement("img"); img.src = this.image; img.style.width = "100%"; img.style.height = "100%"; img.style.position = "absolute"; this.div.appendChild(img); // Add the element to the "overlayLayer" pane. const panes = this.getPanes(); panes.overlayLayer.appendChild(this.div); } draw() { // We use the south-west and north-east // coordinates of the overlay to peg it to the correct position and size. // To do this, we need to retrieve the projection from the overlay. const overlayProjection = this.getProjection(); // Retrieve the south-west and north-east coordinates of this overlay // in LatLngs and convert them to pixel coordinates. // We'll use these coordinates to resize the div. const sw = overlayProjection.fromLatLngToDivPixel( this.bounds.getSouthWest(), ); const ne = overlayProjection.fromLatLngToDivPixel( this.bounds.getNorthEast(), ); // Resize the image's div to fit the indicated dimensions. if (this.div) { this.div.style.left = sw.x + "px"; this.div.style.top = ne.y + "px"; this.div.style.width = ne.x - sw.x + "px"; this.div.style.height = sw.y - ne.y + "px"; } } /** * The onRemove() method will be called automatically from the API if * we ever set the overlay's map property to 'null'. */ onRemove() { if (this.div) { this.div.parentNode.removeChild(this.div); delete this.div; } } /** * Set the visibility to 'hidden' or 'visible'. */ hide() { if (this.div) { this.div.style.visibility = "hidden"; } } show() { if (this.div) { this.div.style.visibility = "visible"; } } toggle() { if (this.div) { if (this.div.style.visibility === "hidden") { this.show(); } else { this.hide(); } } } toggleDOM(map) { if (this.getMap()) { this.setMap(null); } else { this.setMap(map); } } } const overlay = new USGSOverlay(bounds, image); overlay.setMap(map); const toggleButton = document.createElement("button"); toggleButton.textContent = "Toggle"; toggleButton.classList.add("custom-map-control-button"); const toggleDOMButton = document.createElement("button"); toggleDOMButton.textContent = "Toggle DOM Attachment"; toggleDOMButton.classList.add("custom-map-control-button"); toggleButton.addEventListener("click", () => { overlay.toggle(); }); toggleDOMButton.addEventListener("click", () => { overlay.toggleDOM(map); }); map.controls[google.maps.ControlPosition.TOP_RIGHT].push(toggleDOMButton); map.controls[google.maps.ControlPosition.TOP_RIGHT].push(toggleButton); } window.initMap = initMap;
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } .custom-map-control-button { background-color: #fff; border: 0; border-radius: 2px; box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3); margin: 10px; padding: 0 0.5em; font: 400 18px Roboto, Arial, sans-serif; overflow: hidden; height: 40px; cursor: pointer; } .custom-map-control-button:hover { background: rgb(235, 235, 235); }
HTML
<html> <head> <title>Showing/Hiding Overlays</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map"></div> <!-- The `defer` attribute causes the script to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises. See https://developers.google.com/maps/documentation/javascript/load-maps-js-api for more information. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly" defer ></script> </body> </html>