Wstęp
Nakładki to obiekty na mapie powiązane ze współrzędnymi szerokości i długości geograficznej, więc przesuwają się podczas przeciągania lub powiększania mapy. Jeśli chcesz umieścić obraz na mapie, możesz użyć obiektu GroundOverlay
.
Informacje o innych typach nakładek znajdziesz w artykule o rysowaniu na mapie.
Dodaj obraz podłoża
Konstruktor
GroundOverlay
określa adres URL obrazu i parametr LatLngBounds
obrazu. Obraz zostanie wyrenderowany na mapie, ograniczony do podanych granic i dopasowany z użyciem odwzorowania mapy.
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;
Wypróbuj fragment
Usuwanie warstwy terenu
Aby usunąć nakładkę z mapy, wywołaj metodę setMap()
nakładki, przekazując do niej null
. Pamiętaj, że wywołanie tej metody nie powoduje usunięcia nakładki. Nakładka zostanie usunięta z mapy. Jeśli chcesz usunąć nakładkę, musisz ją usunąć z mapy, a następnie ustawić dla niej wartość null
.
function removeOverlay() { historicalOverlay.setMap(null); }