مقدمة
التراكبات هي كائنات على الخريطة مرتبطة
إحداثيات خطوط العرض/خطوط الطول، بحيث تتحرك عند السحب أو
تكبير/تصغير الخريطة. إذا كنت تريد وضع صورة على الخريطة، يمكنك استخدام
عنصر 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); }