Warstwa rysowania (biblioteka)

  1. Omówienie
  2. Korzystanie z biblioteki
  3. Opcje menedżera Rysunków
  4. Aktualizowanie ustawienia Narzędzia do rysowania
  5. Zdarzenia rysowania

Omówienie

Klasa DrawingManager udostępnia graficzny interfejs do rysowania. wielokąty, prostokąty, linie łamane, okręgi i znaczniki na mapie.

Korzystanie z Biblioteki

Narzędzia do rysowania to niezależna biblioteka niezależna od głównych Map Google Kod JavaScript API. Aby korzystać z funkcji zawartych w tej bibliotece, musisz go najpierw wczytać za pomocą parametru libraries w sekcji Adres URL wczytywania interfejsu API Map Google:

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

Po dodaniu parametru Library możesz utworzyć DrawingManager. w następujący sposób:

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

Opcje narzędzia GraphicManager

Konstruktor DrawingManager przyjmuje zestaw opcji, które definiują zbiór elementy sterujące do wyświetlenia, położenie elementu sterującego i początkowy rysunek stanu.

  • Właściwość drawingMode właściwości DrawingManager określa wartość początkową w Menedżerze Rysunków. Akceptuje ona google.maps.drawing.OverlayType jest stała. Domyślna wartość to null. W tym przypadku kursor jest w obszarze nierysunkowym. po zainicjowaniu menedżera Rysunków.
  • Właściwość drawingControl elementu DrawingManager określa widoczność interfejsu wyboru narzędzi do rysowania na mapie. Akceptuje ona wartość logiczna.
  • Możesz również określić położenie elementu sterującego oraz typy elementów nakładki, które powinny być reprezentowane w elemencie kontrolnym, korzystając z funkcji Właściwość drawingControlOptions elementu DrawingManager.
    • position określa położenie elementu sterującego rysowaniem na mapie oraz akceptuje google.maps.ControlPosition jest stała.
    • drawingModes to tablica obejmująca stałych google.maps.drawing.OverlayType oraz określa typy nakładek, które mają zostać uwzględnione w kształcie kontrolnym rysowania . Ikona dłoni jest zawsze widoczna, dzięki czemu użytkownik może: i interakcji z mapą bez rysowania. Kolejność narzędzi w tabeli element sterujący będzie dopasowany do kolejności, w jakiej są zadeklarowane w tablicy.
  • Każdemu typowi nakładki możesz przypisać zestaw właściwości domyślnych, określić wygląd nakładki podczas jej tworzenia. Są one zdefiniowane we właściwości {overlay}Options tej nakładki (gdzie {overlay} reprezentuje (typ nakładki). Na przykład właściwości wypełnienia okręgu, kreska właściwości, zIndex i klikalność można zdefiniować za pomocą circleOptions usłudze. Wszystkie wartości dotyczące rozmiaru, lokalizacji lub mapy są ignorowane. Szczegółowe informacje o tym, które właściwości można ustawić, znajdziesz w Dokumentacja API

Uwaga: aby kształtem można było edytować, gdy został już ustaw 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

Zobacz próbkę

Aktualizowanie ustawienia narzędzi do rysowania

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

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

Aby ukryć lub wyświetlić element sterujący narzędziami do rysowania:

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

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

Aby usunąć element sterujący narzędziami do rysowania z obiektu map:

drawingManager.setMap(null);

Ukrycie elementu sterującego rysowaniem powoduje, że nie są one wyświetlane. ale wszystkie funkcje klasy DrawingManager są nadal dostępne. Dzięki temu możesz w razie potrzeby wdrożyć własne elementy sterujące. Usunięcie DrawingManager z obiektu map wyłącza wszystkie funkcje rysowania. jego należy ponownie dołączyć do mapy wraz z elementem drawingManager.setMap(map) lub nowym Liczba utworzonych obiektów: DrawingManager, jeśli mają zostać przywrócone obiekty rysunku.

Zdarzenia rysowania

Przy tworzeniu nakładki kształtu wywoływane są dwa zdarzenia:

  • Zdarzenie {overlay}complete (gdzie {overlay} reprezentuje typ nakładki, np. circlecomplete, polygoncomplete itp.). O odwołanie do nakładki jest przekazywane jako argument.
  • Zdarzenie overlaycomplete. Literał obiektu, zawierający Jako argument jest przekazywany OverlayType oraz odwołanie do nakładki.
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 google.maps.Map zdarzenia, takie jak click i mousemove, są wyłączone podczas rysowania na mapie.