מבוא
שכבות-על הן אובייקטים במפה שקשורים לקואורדינטות של קווי אורך ורוחב, ולכן הן זזות כשגוררים או משנים את מרחק התצוגה של המפה. כדי להציב תמונה במפה, אפשר להשתמש
באובייקט 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); }