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