Calque de dessin (bibliothèque)

  1. Présentation
  2. Utiliser la bibliothèque
  3. Options DrawingManager
  4. Modifier la commande des outils de dessin
  5. Événements de dessin

Présentation

La classe DrawingManager fournit une interface graphique permettant aux utilisateurs de dessiner des polygones, des rectangles, des polylignes, des cercles et des repères sur la carte.

Utiliser la bibliothèque

Les outils de dessin constituent une bibliothèque autonome, séparée du code JavaScript principal de l'API Google Maps. Pour utiliser la fonctionnalité contenue dans cette bibliothèque, vous devez d'abord la charger à l'aide du paramètre libraries dans l'URL d'amorçage de l'API Google Maps :

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=drawing&callback=initMap">
</script>

Une fois le paramètre de bibliothèques ajouté, vous pouvez créer un objet DrawingManager comme suit :

var drawingManager = new google.maps.drawing.DrawingManager();
drawingManager.setMap(map);

Options DrawingManager

Le constructeur DrawingManager utilise un ensemble d'options qui définissent l'ensemble des commandes à afficher, la position de la commande et l'état de dessin initial.

  • La propriété drawingMode de DrawingManager définit l'état de dessin initial de DrawingManager. Elle accepte une constante google.maps.drawing.OverlayType. La valeur par défaut est null. Dans ce cas, le curseur n'est pas en mode Dessin lorsque le DrawingManager est initialisé.
  • La propriété drawingControl de DrawingManager définit la visibilité de l'interface de sélection des outils de dessin sur la carte. Elle accepte une valeur booléenne.
  • Vous pouvez également définir la position de la commande et les types de superpositions à représenter dans la commande avec la propriété drawingControlOptions de DrawingManager.
    • position définit la position de la commande de dessin sur la carte et accepte une constante google.maps.ControlPosition.
    • drawingModes est un tableau de constantes google.maps.drawing.OverlayType et définit les types de superpositions à inclure dans le sélecteur de forme de la commande de dessin. L'icône de main est toujours présente. Elle permet à l'utilisateur d'interagir avec la carte sans dessiner dessus. L'ordre des outils dans la commande est identique à l'ordre dans lequel ils sont déclarés dans le tableau.
  • Il est possible d'attribuer des propriétés par défaut à tout type de superposition afin de définir quelle sera son apparence au moment de sa création. Elles sont définies dans la propriété {overlay}Options de cette superposition (où {overlay} représente le type de superposition). Par exemple, pour un cercle, les propriétés de remplissage et de trait, le zIndex et la cliquabilité peuvent être définis dans la propriété circleOptions. Si des valeurs de taille, de carte ou de localisation sont transmises, elles sont ignorées. Pour en savoir plus sur les propriétés pouvant être définies, consultez la documentation de référence de l'API.

Remarque : Pour qu'une forme soit modifiable par l'utilisateur une fois créée, définissez sa propriété editable sur true.

TypeScript

// This example requires the Drawing library. Include the libraries=drawing
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing">

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      center: { lat: -34.397, lng: 150.644 },
      zoom: 8,
    }
  );

  const drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [
        google.maps.drawing.OverlayType.MARKER,
        google.maps.drawing.OverlayType.CIRCLE,
        google.maps.drawing.OverlayType.POLYGON,
        google.maps.drawing.OverlayType.POLYLINE,
        google.maps.drawing.OverlayType.RECTANGLE,
      ],
    },
    markerOptions: {
      icon: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png",
    },
    circleOptions: {
      fillColor: "#ffff00",
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1,
    },
  });

  drawingManager.setMap(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

// This example requires the Drawing library. Include the libraries=drawing
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing">
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
  const drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [
        google.maps.drawing.OverlayType.MARKER,
        google.maps.drawing.OverlayType.CIRCLE,
        google.maps.drawing.OverlayType.POLYGON,
        google.maps.drawing.OverlayType.POLYLINE,
        google.maps.drawing.OverlayType.RECTANGLE,
      ],
    },
    markerOptions: {
      icon: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png",
    },
    circleOptions: {
      fillColor: "#ffff00",
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1,
    },
  });

  drawingManager.setMap(map);
}

window.initMap = initMap;
index.js
Voir l'exemple

Essayer l'exemple

Modifier la commande des outils de dessin

Une fois l'objet DrawingManager créé, vous pouvez le modifier en appelant setOptions() et en transmettant de nouvelles valeurs.

drawingManager.setOptions({
  drawingControlOptions: {
    position: google.maps.ControlPosition.BOTTOM_LEFT,
    drawingModes: ['marker']
  }
});

Pour masquer ou afficher la commande des outils de dessin :

// To hide:
drawingManager.setOptions({
  drawingControl: false
});

// To show:
drawingManager.setOptions({
  drawingControl: true
});

Pour supprimer la commande des outils de dessin de l'objet map :

drawingManager.setMap(null);

Si vous masquez la commande de dessin, elle ne s'affiche plus. Néanmoins, toutes les fonctionnalités de la classe DrawingManager restent disponibles. Ainsi, vous pouvez implémenter vos propres commandes, si vous le souhaitez. Si vous supprimez le DrawingManager de l'objet map, toutes les fonctionnalités de dessin sont désactivées. Pour les restaurer, vous devrez réassocier le DrawingManager à la carte avec drawingManager.setMap(map), ou bien construire un nouvel objet DrawingManager.

Événements de dessin

La création d'une superposition de forme déclenche deux événements :

  • Un événement {overlay}complete (où {overlay} représente le type de superposition, par exemple circlecomplete, polygoncomplete, etc.). Une référence à la superposition est transmise en tant qu'argument.
  • Un événement overlaycomplete. Un littéral d'objet, contenant l'OverlayType et une référence à la superposition, est transmis en tant qu'argument.
google.maps.event.addListener(drawingManager, 'circlecomplete', function(circle) {
  var radius = circle.getRadius();
});

google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
  if (event.type == 'circle') {
    var radius = event.overlay.getRadius();
  }
});

Remarque : Les événements google.maps.Map comme click et mousemove sont désactivés lorsque vous dessinez sur la carte.