Çizim Katmanı (Kitaplık)

  1. Genel Bakış
  2. Kitaplık'ı kullanma
  3. DrawingManager Seçenekleri
  4. Çizim Araçları Denetimini Güncelleme
  5. Çizim Etkinlikleri

Genel bakış

DrawingManager sınıfı kullanıcılara harita üzerinde poligon, dikdörtgen, çoklu çizgi, daire ve işaretçi çizmek için kullanabileceğiniz bir grafik arayüz sunar.

Kitaplığı Kullanma

Çizim Araçları, ana Maps API JavaScript kodundan ayrı, bağımsız bir kitaplıktır. Bu kitaplıkta bulunan işlevi kullanmak için önce Maps API önyükleme URL'sindeki libraries parametresini kullanarak bunu yüklemeniz gerekir:

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

collections parametresini ekledikten sonra aşağıdaki şekilde bir DrawingManager nesnesi oluşturabilirsiniz:

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

DrawingManager Seçenekleri

DrawingManager oluşturucu, görüntülenecek denetim grubunu, kontrolün konumunu ve ilk çizim durumunu tanımlayan bir dizi seçenek alır.

  • DrawingManager öğesinin drawingMode özelliği, DrawingManager'ın ilk çizim durumunu tanımlar. google.maps.drawing.OverlayType sabit değerini kabul eder. Varsayılan değer null'dir. Bu durumda, DrawingManager başlatılırken imleç çizim dışı modda olur.
  • DrawingManager öğesinin drawingControl özelliği, çizim araçları seçim arayüzünün harita üzerinde görünürlüğünü tanımlar. Boole değeri kabul eder.
  • Ayrıca DrawingManager öğesinin drawingControlOptions özelliğini kullanarak kontrolün konumunu ve kontrolde temsil edilmesi gereken yer paylaşımı türlerini tanımlayabilirsiniz.
    • position, çizim denetiminin harita üzerindeki konumunu tanımlar ve google.maps.ControlPosition sabitini kabul eder.
    • drawingModes, bir google.maps.drawing.OverlayType sabit değeri dizisidir ve çizim kontrol şekli seçiciye dahil edilecek yer paylaşımı türlerini tanımlar. El simgesi her zaman mevcut olduğundan, kullanıcının çizim yapmadan haritayla etkileşimde bulunabilmesini sağlar. Kontroldeki araçların sırası, dizide bildirildikleri sırayla eşleşir.
  • Her bir bindirme türüne, ilk oluşturulduğunda yer paylaşımının görünümünü tanımlayan bir dizi varsayılan özellik atanabilir. Bunlar, yer paylaşımının {overlay}Options özelliğinde tanımlanır (burada {overlay}, yer paylaşımı türünü temsil eder). Örneğin, bir dairenin dolgu özellikleri, çizgi özellikleri, zIndex ve tıklanabilirlik, circleOptions özelliğiyle tanımlanabilir. Herhangi bir boyut, konum veya harita değeri aktarılırsa bunlar yoksayılır. Hangi özelliklerin ayarlanabileceğiyle ilgili tüm ayrıntılar için API Referansı belgelerini inceleyin.

Not: Bir şekli oluşturulduktan sonra kullanıcı tarafından düzenlenebilir hale getirmek için editable özelliğini true olarak ayarlayın.

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;

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;
Örneği görüntüleyin

Örneği Deneyin

Çizim Araçları Denetimini Güncelleme

DrawingManager nesnesi oluşturulduktan sonra setOptions() yöntemini çağırıp yeni değerler ileterek bu nesneyi güncelleyebilirsiniz.

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

Çizim araçları denetimini gizlemek veya göstermek için:

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

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

Çizim araçları denetimini map nesnesinden kaldırmak için:

drawingManager.setMap(null);

Çizim denetimini gizlemek, çizim araçları denetiminin görüntülenmemesine neden olur, ancak DrawingManager sınıfının tüm işlevleri kullanılabilir durumda kalır. Bu şekilde isterseniz kendi denetiminizi uygulayabilirsiniz. DrawingManager öğesinin map nesnesinden kaldırılması tüm çizim işlevlerini devre dışı bırakır. Çizim özellikleri geri yüklenecekse drawingManager.setMap(map) ile haritaya yeniden eklenmesi veya yeni bir DrawingManager nesnesi oluşturulması gerekir.

Çizim Etkinlikleri

Bir şekil yer paylaşımı oluşturulduğunda iki etkinlik tetiklenir:

  • Bir {overlay}complete etkinliği (burada {overlay}, yer paylaşımı türünü temsil eder (ör. circlecomplete, polygoncomplete vb.). Yer paylaşımına yapılan bir başvuru bağımsız değişken olarak iletilir.
  • overlaycomplete etkinliği. OverlayType öğesini ve yer paylaşımına bir referansı içeren bir nesne değişmez değeri bağımsız değişken olarak iletilir.
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();
  }
});

Haritada çizim yaparken click ve mousemove gibi google.maps.Map etkinliklerinin devre dışı bırakıldığını unutmayın.