Çizim Katmanı (Kitaplık)

  1. Genel Bakış
  2. Kitaplığı kullanma
  3. DrawingManager Seçenekleri
  4. Çizim Araçları Kontrolü'nü güncelleme
  5. Çizim Etkinlikleri

Genel Bakış

DrawingManager sınıfı, kullanıcıların haritada poligonlar, dikdörtgenler, çoklu çizgiler, daireler ve işaretçiler çizmesi için grafik arayüzü sağlar.

Kitaplığı kullanma

Çizim Araçları, ana Maps API JavaScript kodundan ayrı, bağımsız bir kitaplıktır. Bu kitaplıkta yer alan işlevleri kullanmak için öncelikle Maps API bootstrap URL'sindeki libraries parametresini kullanarak yüklemeniz gerekir:

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

Kitaplıklar parametresini ekledikten sonra DrawingManagernesneyi aşağıdaki gibi oluşturabilirsiniz:

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

DrawingManager Seçenekleri

DrawingManager oluşturucusu, görüntülenecek kontrolleri, kontrolün konumunu ve ilk çizim durumunu tanımlayan bir seçenekler grubu alır.

  • DrawingManager öğesinin drawingMode özelliği, DrawingManager'ın ilk çizim durumunu tanımlar. google.maps.drawing.OverlayType sabitini kabul eder. Varsayılan değer null'dır. Bu durumda, DrawingManager başlatıldığında imleç çizim dışı bir modda olur.
  • drawingControl özelliği, DrawingManager öğesinin haritadaki çizim araçları seçim arayüzünün görünürlüğünü tanımlar. Boole değerini kabul eder.
  • Ayrıca, DrawingManager öğesinin drawingControlOptions özelliğini kullanarak kontrolün konumunu ve kontrolde gösterilmesi gereken yer paylaşımlarının türlerini de tanımlayabilirsiniz.
    • position, çizim kontrolünün haritadaki konumunu tanımlar ve google.maps.ControlPosition sabitini kabul eder.
    • drawingModes, google.maps.drawing.OverlayType sabitlerinden oluşan bir dizidir ve çizim denetimi şekil seçicisine eklenecek yer paylaşımı türlerini tanımlar. El simgesi her zaman görünür durumda olur. Böylece kullanıcı, çizim yapmadan haritayla etkileşimde bulunabilir. Kontroldeki araçların sırası, dizide bildirildikleri sırayla eşleşir.
  • Her tür yerleşime, ilk oluşturulduğunda yerleşimin 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, kontur özellikleri, zIndex ve tıklanabilirlik, circleOptions özelliğiyle tanımlanabilir. Boyut, konum veya harita değerleri iletilirse bunlar yoksayılır. Hangi özelliklerin ayarlanabileceğiyle ilgili tüm ayrıntılar için API referans belgelerine bakın.

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

Örneği deneyin

Çizim Araçları Kontrolünü Güncelleme

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

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

Çizim araçları kontrolünü gizlemek veya göstermek için:

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

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

Çizim araçları kontrolünü map nesnesinden kaldırmak için:

drawingManager.setMap(null);

Çizim kontrolünün gizlenmesi, çizim araçları kontrolünün görüntülenmemesine neden olur ancak DrawingManager sınıfının tüm işlevleri kullanılmaya devam eder. Bu şekilde kendi kontrolünüzü uygulayabilirsiniz. DrawingManager öğesinin map nesnesinden kaldırılması tüm çizim işlevlerini devre dışı bırakır. Çizim özelliklerinin geri yüklenmesi için DrawingManager öğesinin drawingManager.setMap(map) ile haritaya yeniden eklenmesi veya yeni bir DrawingManager nesnesi oluşturulması gerekir.

Çizim Etkinlikleri

Şekil yerleşimi oluşturulduğunda iki etkinlik tetiklenir:

  • {overlay}complete etkinliği ({overlay}, yer paylaşımı türünü temsil eder; örneğin, circlecomplete, polygoncomplete vb.). Yerleşime yapılan referans, bağımsız değişken olarak aktarılır.
  • overlaycomplete etkinliği. OverlayType ve yer paylaşımlı öğeye referans içeren bir nesne değişmezi, 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();
  }
});

Harita üzerinde çizim yaparken google.maps.Map etkinliklerinin (ör. click ve mousemove) devre dışı bırakıldığını unutmayın.