Ta strona została przetłumaczona przez Cloud Translation API.

Warstwa rysowania (biblioteka)

Przegląd
Korzystanie z Biblioteki
Opcje Rysowania
Aktualizowanie kontroli narzędzi do rysowania
Rysowanie wydarzeń

Omówienie

Klasa DrawingManager oferuje graficzny interfejs użytkownika do rysowania wielokątów, prostokątów, linii łamanych, okręgów i znaczników.

Korzystanie z biblioteki

Narzędzia do rysowania to samodzielna biblioteka niezależna od głównego kodu JavaScript interfejsu API Map Google. Aby korzystać z funkcji tej biblioteki, musisz najpierw wczytać go za pomocą parametru libraries w adresie URL rozruchowego interfejsu API Map Google:

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

Po dodaniu parametru bibliotek możesz utworzyć obiekt DrawingManager w ten sposób:

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

Opcje Rysunku

Konstruktor DrawingManager przyjmuje zestaw opcji definiujących zestaw elementów sterujących do wyświetlenia, położenie elementu sterującego oraz początkowy stan rysowania.

Właściwość drawingMode elementu DrawingManager określa początkowy stan rysowania obiektu Rysowanie. Akceptuje stałą google.maps.drawing.OverlayType. Domyślna wartość to null. W takim przypadku kursor jest w trybie innym niż rysowanie, gdy inicjowana jest funkcja Rysowanie.
Właściwość drawingControl elementu DrawingManager definiuje widoczność interfejsu wyboru narzędzi do rysowania na mapie. Może mieć wartość logiczną.
Za pomocą właściwości drawingControlOptions elementu DrawingManager możesz też określić położenie elementu sterującego oraz typy nakładek, które powinny być widoczne w ustawieniu kontrolnym.
- position określa położenie elementu sterującego na mapie i akceptuje stałą google.maps.ControlPosition.
- drawingModes to tablica stałych wartości google.maps.drawing.OverlayType, która określa typy nakładek, które mają zostać uwzględnione w selektorze kształtu kształtu. Pojawia się zawsze ikona dłoni, która umożliwia użytkownikom interakcję z mapą bez konieczności rysowania. Kolejność narzędzi w kontrolce odpowiada kolejności, w której są one zadeklarowane w tablicy.
Do każdego typu nakładki można przypisać zestaw właściwości domyślnych, które określają jej wygląd po utworzeniu. Są one zdefiniowane we właściwości {overlay}Options nakładki (gdzie {overlay} reprezentuje typ nakładki). Na przykład właściwości wypełnienia, właściwości kreski, zIndex i klikalności okręgu można zdefiniować za pomocą właściwości circleOptions. Przekazywanie jakichkolwiek wartości dotyczących rozmiaru, lokalizacji lub mapy jest ignorowane. Szczegółowe informacje o tym, które właściwości można ustawić, znajdziesz w dokumentacji referencyjnej interfejsu API.

Uwaga: aby po utworzeniu kształtu user- edytować, ustawić jego właściwość editable na 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

Zobacz przykład

Fragment

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

Aktualizowanie opcji narzędzi do rysowania

Po utworzeniu obiektu DrawingManager możesz go zaktualizować, wywołując setOptions() i przekazując nowe wartości.

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

Aby ukryć lub wyświetlić elementy sterujące narzędziami do rysowania:

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

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

Aby usunąć element sterujący narzędzia do obiektu map:

drawingManager.setMap(null);

Ukrycie elementu sterującego rysunku uniemożliwia wyświetlanie opcji narzędzi do rysowania, ale wszystkie funkcje klasy DrawingManager są nadal dostępne. Dzięki temu w razie potrzeby możesz wdrożyć własną kontrolę. Usunięcie obiektu DrawingManager z obiektu map spowoduje wyłączenie wszystkich funkcji rysowania. Aby przywrócić funkcje rysowania, należy ponownie dołączyć do mapy obiekt drawingManager.setMap(map) lub utworzyć nowy obiekt DrawingManager.

Wydarzenia związane z rysowaniem

Podczas tworzenia nakładki kształtu wywoływane są 2 zdarzenia:

Zdarzenie {overlay}complete (gdzie {overlay} oznacza typ nakładki, np. circlecomplete, polygoncomplete). Odwołanie do nakładki jest przekazywane jako argument.
Zdarzenie overlaycomplete. Literał obiektu zawierający OverlayType i odniesienie do nakładki jest przekazywany jako 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();
  }
});

Pamiętaj, że podczas rysowania na mapie zdarzenia google.maps.Map, takie jak click i mousemove, są wyłączone.