Superpositions au sol

Sélectionnez une plate-forme : Android iOS JavaScript
  1. Introduction
  2. Ajouter une superposition au sol
  3. Retirer une superposition au sol

Introduction

Les superpositions sont des objets qui, sur une carte, sont liés aux coordonnées de latitude/longitude. Elles se déplacent donc lorsque vous faites glisser une 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 Dessiner sur la carte.

Ajouter une superposition au sol

Le constructeur d'une GroundOverlay spécifie l'URL d'une image et les LatLngBounds de l'image en tant que paramètres. L'image est affichée sur la carte dans les limites définies et adaptée en utilisant 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;
index.ts

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

Essayer avec un exemple

Retirer une superposition au sol

Pour retirer une superposition d'une carte, appelez la méthode setMap() de la superposition en transmettant null. Notez que cette méthode ne supprime pas la superposition. Elle la retire simplement 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