Superpositions au sol

Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.
Sélectionnez une plate-forme: Android iOS JavaScript
  1. Introduction
  2. Ajouter une superposition au sol
  3. Supprimer une superposition au sol

Présentation

Les superpositions sont des objets de la carte qui sont liés aux coordonnées de latitude/longitude. Elles se déplacent donc lorsque vous faites glisser la carte ou effectuez un zoom. Si vous souhaitez placer une image sur une carte, vous pouvez utiliser un objet GroundOverlay.

Pour en savoir plus sur les autres types de superposition, consultez la section Dessiner sur la carte.

Ajouter une superposition au sol

Le constructeur d'une propriété GroundOverlay spécifie l'URL d'une image et l'identifiant LatLngBounds de l'image en tant que paramètres. L'image sera affichée sur la carte, limitée aux limites données et conforme à la projection de la carte.

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;
Voir un exemple

Essayer l'exemple

Effacer une superposition au sol

Pour supprimer une superposition d'une carte, appelez la méthode setMap() de la superposition en transmettant null. Notez que l'appel de cette méthode ne supprime pas la superposition. Elle supprime la superposition de la carte. Si vous souhaitez plutôt supprimer la superposition, vous devez la retirer de la carte, puis définir la superposition elle-même sur null.

function removeOverlay() {
  historicalOverlay.setMap(null);
}

Voir un exemple