Çizim Katmanı (Kitaplık)

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

Genel Bakış

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

Kitaplığı kullanma

Çizim Araçları, ana Haritalar uygulamasından ayrı, bağımsız bir kitaplıktır API JavaScript kodu. Bu kitaplıkta bulunan işlevleri kullanmak için, önce libraries parametresini kullanarak yüklemeniz gerekir: Haritalar API'si önyükleme URL'si:

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

Kitaplık parametresini ekledikten sonra DrawingManager oluşturabilirsiniz nesnesini tanımlayın:

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

DrawingManager Seçenekleri

DrawingManager oluşturucusu, kontrol düğmelerinin konumunu ve ilk çizimi gösteren durumu.

  • DrawingManager öğesinin drawingMode özelliği, DrawingManager'ın çizim durumu. Şunları kabul eder: google.maps.drawing.OverlayType sabittir. Varsayılan değer null. Bu durumda imleç, çizim olmayan bir konumdadır. ilk kullanıma hazır hale getirildiğinden emin olursunuz.
  • DrawingManager öğesinin drawingControl özelliği Çizim araçları seçim arayüzünün harita üzerinde görünürlüğü. Şunları kabul eder: boole değeri.
  • Ayrıca kontrolün konumunu ve kontrolün türlerini kodu kullanılarak kontrolde temsil edilmesi gereken yer paylaşımları DrawingManager öğesinin drawingControlOptions özelliği.
    • position, çizim kontrolünün harita üzerindeki konumunu tanımlar ve google.maps.ControlPosition kabul edilir sabittir.
    • drawingModes, google.maps.drawing.OverlayType sabitleri ve çizim kontrol şekline dahil edilecek bindirme türlerini tanımlar kullanabilirsiniz. El simgesi her zaman mevcut olduğundan kullanıcının haritayla çizim yapmadan etkileşim kurabilirsiniz. Araçların sıralamadaki kontrolü, dizide bildirildikleri sırayla eşleşir.
  • Her yer paylaşımı türüne bir dizi varsayılan özellik atanabilir. ilk oluşturulduğunda bindirmenin görünümünü tanımlar. Bunlar, söz konusu yer paylaşımının {overlay}Options özelliğinde (burada {overlay}, yer paylaşımlı türü). Örneğin, bir dairenin dolgu özellikleri, çizgi özellikleri, z Endeksi ve tıklanabilirlik, circleOptions ile tanımlanabilir. Herhangi bir boyut, konum veya harita değeri iletilirse bunlar yoksayılır. Hangi özelliklerin ayarlanabileceğiyle ilgili tüm ayrıntılar için API Referans belgeleri.

Not: Bir şekli sonradan kullanıcı tarafından düzenlenebilir hale getirmek için oluşturuldu, 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 inceleyin

Örneği Deneyin

Çizim Araçları Denetimi güncelleniyor

DrawingManager nesnesi oluşturulduktan sonra nesneyi şu şekilde güncelleyebilirsiniz: setOptions() işlevini çağırma ve yeni değerleri iletme.

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 kontrolünü gizlemek, çizim araçları denetiminin gösterilmemesine neden olur. ancak DrawingManager sınıfının tüm işlevleri hâlâ kullanılabilir durumdadır. Bu şekilde, isterseniz kendi denetiminizi uygulayabilirsiniz. Kaldırmak map nesnesindeki DrawingManager tüm çizim işlevlerini devre dışı bırakır; o haritaya drawingManager.setMap(map) veya yeni bir Çizim özellikleri geri yüklenecekse DrawingManager nesne oluşturuldu.

Çizim Etkinlikleri

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

  • Bir {overlay}complete etkinliği (burada {overlay} temsil edilir) circlecomplete, polygoncomplete vb. gibi yer paylaşımı türü). CEVAP yer paylaşımına başvuru, bağımsız değişken olarak iletilir.
  • overlaycomplete etkinliği. Şunları içeren bir nesne değişmez değeri: OverlayType ve yer paylaşımına bir başvuru 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();
  }
});

google.maps.Map Haritada çizim yapılırken click ve mousemove gibi etkinlikler devre dışı bırakılır.