Einführung
Overlays sind Objekte auf der Karte, die an Breiten- und Längengrad gebunden sind, sodass sie sich beim Ziehen oder Zoomen der Karte mitbewegen. Wenn Sie ein Bild auf einer Karte platzieren möchten, können Sie ein GroundOverlay-Objekt verwenden.
Informationen zu anderen Arten von Overlays finden Sie unter Auf Karten zeichnen.
Boden-Overlays hinzufügen
Der Konstruktor für ein GroundOverlay-Objekt definiert eine Bild-URL und die LatLngBounds-Werte des Bilds als Parameter. Das Bild wird auf der Karte gerendert. Dabei wird es auf die angegebenen Grenzen beschränkt und an die Projektion der Karte angepasst.
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;
Testbeispiel
Boden-Overlays entfernen
Wenn Sie ein Overlay von einer Karte entfernen möchten, rufen Sie die Methode setMap() des Overlays auf und übergeben Sie null. Dadurch wird das Overlay nicht gelöscht, sondern lediglich von der Karte entfernt. Wenn Sie es löschen möchten, müssen Sie es von der Karte entfernen und dann auf null setzen.
function removeOverlay() {
historicalOverlay.setMap(null);
}