Bu sayfa, Cloud Translation API ile çevrilmiştir.

Çizim Katmanı (Kitaplık)

Genel Bakış
Kitaplık'ı kullanma
DrawingManager Seçenekleri
Çizim Araçları Denetimi'ni güncelleme
Çizim Etkinlikleri

Genel bakış

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

Kitaplığı Kullanma

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

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

kitaplıklar 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şturucusu, görüntülenecek kontrol 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 değeridir. 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 üzerindeki görünürlüğünü tanımlar. Bir 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 kontrolünün harita üzerindeki konumunu tanımlar ve google.maps.ControlPosition sabit değerini 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ğu için, kullanıcının çizim yapmadan haritayla etkileşimde bulunmasına olanak tanır. Kontroldeki araçların sırası, dizide bildirildikleri sırayla eşleşir.
Her bir 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, söz konusu 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, zEndeksi ve tıklanabilirlik özellikleri circleOptions özelliğiyle tanımlanabilir. Herhangi bir boyut, konum veya harita değeri aktarılırsa bunlar yok sayı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 ö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

JSFiddle.net Google Cloud Shell

Çizim Araçları Denetimini 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ı 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 denetiminin gizlenmesi, ç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 öğenin, 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ü (circlecomplete, polygoncomplete vb. gibi) temsil eder). Yer paylaşımına yönelik bir referans bağımsız değişken olarak iletilir.
Bir overlaycomplete etkinliği. OverlayType öğesini ve yer paylaşımına ilişkin referansı içeren bir nesne değişmez değeri bağımsız değişken olarak aktarılır.

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 click ve mousemove gibi google.maps.Map etkinliklerinin devre dışı bırakıldığını unutmayın.