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