Çizim Katmanı (Kitaplık)

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

Genel Bakış

DrawingManager sınıfı, kullanıcıların haritada poligon, dikdörtgen, çoklu çizgi, daire ve işaretçi çizebilmesi için grafik bir arayüz sağlar.

Kitaplığı kullanma

Çizim Araçları, ana Maps API JavaScript kodundan ayrı, kendi kendine yeten bir kitaplıktır. Bu kitaplıktaki işlevleri kullanmak için öncelikle Maps API önyükleme URL'sinde libraries parametresini kullanarak kitaplığı yüklemeniz gerekir:

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

libraries parametresini ekledikten sonra aşağıdaki gibi bir DrawingManager objesi oluşturabilirsiniz:

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

DrawingManager Seçenekleri

DrawingManager kurucusu, gösterilecek kontrol grubunu, kontrolün konumunu ve ilk çizim durumunu tanımlayan bir dizi seçenek alır.

  • DrawingManager nesnesinin drawingMode özelliği, DrawingManager nesnesinin ilk çizim durumunu tanımlar. google.maps.drawing.OverlayType sabit değerini kabul eder. Varsayılan değer null'tür. Bu durumda, DrawingManager başlatılırken imleç çizim dışı modda olur.
  • DrawingManager öğesinin drawingControl mülkü, haritadaki çizim araçları seçim arayüzünün görünürlüğünü tanımlar. Boole değeri kabul eder.
  • Ayrıca, DrawingManager öğesinin drawingControlOptions özelliğini kullanarak denetimin konumunu ve denetimde gösterilmesi gereken yer paylaşımı türlerini de tanımlayabilirsiniz.
    • position, çizim denetiminin haritadaki konumunu tanımlar ve google.maps.ControlPosition sabit değerini kabul eder.
    • drawingModes, google.maps.drawing.OverlayType sabitlerinden oluşan bir dizidir ve çizim denetimi şekil seçicisine dahil edilecek yer paylaşımı türlerini tanımlar. El simgesi her zaman gösterilir. Böylece kullanıcı, çizim yapmadan harita üzerinde işlem yapabilir. Kontroldeki araçların sırası, dizi içinde tanımlandıkları sırayla eşleşir.
  • Her yer paylaşımı 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 mülkünde tanımlanır ({overlay}, yer paylaşımı türünü temsil eder). Örneğin, bir dairenin dolgu özellikleri, çizgi özellikleri, z-endeksi ve tıklanabilirliği circleOptions özelliğiyle tanımlanabilir. İletilen boyut, konum veya harita değerleri yoksayılır. Hangi özelliklerin ayarlanabileceğiyle ilgili tüm ayrıntılar için API Referans dokümanlarına bakın.

Not: Bir şekli oluşturulduktan sonra kullanıcı tarafından düzenlenebilir hale getirmek için editable mülkünü 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ı Denetimi'ni güncelleme

DrawingManager nesnesi oluşturulduktan sonra setOptions()'u ç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ı denetimini map nesnesinden kaldırmak için:

drawingManager.setMap(null);

Çizim denetimini gizlemek, çizim araçları denetiminin gösterilmemesine neden olur ancak DrawingManager sınıfının tüm işlevleri kullanılabilir durumda kalır. Bu sayede, dilerseniz kendi denetiminizi uygulayabilirsiniz. DrawingManager nesnesi map nesnesinden kaldırıldığında tüm çizim işlevleri devre dışı bırakılır. Çizim özelliklerinin geri yüklenmesini istiyorsanız DrawingManager nesnesi drawingManager.setMap(map) ile haritaya yeniden eklenmeli veya yeni bir DrawingManager nesnesi oluşturulmalıdır.

Çizim Etkinlikleri

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

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

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