מבוא
שכבות-על הן אובייקטים במפה שקשורים לקואורדינטות של קו אורך/רוחב, כדי שהן יזוזו כשגוררים את המפה או משנים את מרחק התצוגה שלה. למידע על בסוגי שכבות-על, שרטוט על המפה.
ממשק JavaScript API של מפות Google מספק
כיתה OverlayView
עבור
יצירת שכבות-על מותאמות אישית משלכם. OverlayView
היא מחלקה בסיסית
מספק כמה שיטות שצריך להטמיע כשיוצרים שכבות-על.
מספק גם כמה שיטות שמאפשרות לתרגם
את הקואורדינטות ואת המיקומים במפה.
הוספת שכבת-על מותאמת אישית
לפניכם סיכום של השלבים הנדרשים כדי ליצור שכבת-על מותאמת אישית:
- מגדירים את
prototype
של אובייקט שכבת-על המותאם אישית למופע חדש שלgoogle.maps.OverlayView()
. בפועל, הפעולה הזו תסווג את שכבת-העל בכיתה. - יוצרים constructor לשכבת-העל המותאמת אישית ומגדירים אתחול .
- הטמעת שיטת
onAdd()
באב הטיפוס וצירוף שכבת-העל למפה. תתבצע שיחה אלOverlayView.onAdd()
כשהמפה תהיה מוכנה עבור את שכבת-העל שתצורף. - להטמיע שיטת
draw()
באב הטיפוס ולטפל ברכיבים החזותיים של האובייקט. תתבצע קריאה אלOverlayView.draw()
כשהאובייקט מוצגת לראשונה. - כדאי גם להשתמש בשיטת
onRemove()
כדי לנקות רכיבים שהוספתם בשכבת-העל.
בהמשך מופיעים פרטים נוספים לגבי כל שלב. אפשר לראות את הדוגמה הפעילה המלאה code: הצגת קוד לדוגמה.
סיווג משנה של שכבת-העל
הדוגמה הבאה משתמשת ב-OverlayView
כדי ליצור שכבת-על פשוטה לתמונה.
עכשיו אנחנו יוצרים constructor למחלקה 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; }
עדיין אין לנו אפשרות לצרף את שכבת-העל למפה ב-constructor של שכבת-העל. קודם כל, אנחנו צריכים לוודא שכל החלוניות של המפה זמינות, כי לציין את הסדר שבו האובייקטים מוצגים במפה. ה-API מספק שיטת סיוע שמציינת שזה קרה. אנחנו נטפל בשיטה הזו .
אתחול שכבת-העל
כששכבת-העל נוצרת לראשונה ומוכנה להצגה, עלינו לחבר
אותו למפה דרך ה-DOM של הדפדפן. ה-API מציין ששכבת-העל
שנוספו למפה על ידי הפעלת השיטה onAdd()
של שכבת-העל. כדי לטפל בזה
אנחנו יוצרים <div>
כדי להחזיק את התמונה שלנו, להוסיף רכיב <img>
, לצרף אותו
ל-<div>
, ולאחר מכן לצרף את שכבת-העל לאחד מהחלוניות של המפה. חלונית
הוא צומת בתוך עץ ה-DOM.
החלוניות, מסוג
MapPanes
, לציין את
לשכבות שונות במפה. החלוניות הבאות
והן נספרות לפי הסדר שבו הן מקובצות למטה
לראש הדף:
mapPane
היא החלונית הנמוכה ביותר ונמצאת מעל המשבצות. ייתכן שהוא לא יקבל DOM אירועים. (פאן 0).overlayLayer
מכיל קווים פוליגוניים, פוליגונים, שכבות-על של קרקע ושכבת אריחים שכבות-על. יכול להיות שהוא לא יקבל אירועי DOM. (שלב 1).markerLayer
מכיל סמנים. יכול להיות שהוא לא יקבל אירועי DOM. (שלב 2).overlayMouseTarget
מכיל רכיבים שמקבלים אירועי DOM. (שלב 3).floatPane
מכיל את חלון המידע. היא מעל כל שכבות-העל של המפה. (פאן) 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>
. הפעולה הזו תשנה את גודל התמונה כך שתתאים
את הגבולות שציינו ב-constructor של שכבת-העל.
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>