Layer (Pustaka) Gambar

  1. Ringkasan
  2. Menggunakan Library
  3. Opsi DrawingManager
  4. Mengupdate Kontrol Alat Gambar
  5. Peristiwa Menggambar

Ringkasan

Class DrawingManager menyediakan antarmuka grafis bagi pengguna untuk menggambar poligon, persegi panjang, polyline, lingkaran, dan penanda pada peta.

Menggunakan Library

Alat Gambar adalah library mandiri, yang terpisah dari kode utama Maps API JavaScript. Untuk menggunakan fungsi yang ada dalam library ini, Anda harus memuatnya terlebih dahulu menggunakan parameter libraries di URL bootstrap Maps API:

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

Setelah menambahkan parameter library, Anda dapat membuat objek DrawingManager sebagai berikut:

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

Opsi DrawingManager

Konstruktor DrawingManager menggunakan sekumpulan opsi yang mendefinisikan seperangkat kontrol untuk menampilkan, posisi kontrol, dan status awal gambar.

  • Properti drawingMode dari DrawingManager menentukan status gambar awal DrawingManager. Properti ini menerima konstanta google.maps.drawing.OverlayType. Defaultnya adalah null, dengan kursor berada dalam mode non-gambar saat DrawingManager diinisialisasi.
  • Properti drawingControl dari DrawingManager menentukan visibilitas antarmuka pemilihan alat gambar pada peta. Properti ini menerima nilai boolean.
  • Anda juga dapat menentukan posisi kontrol, dan jenis overlay yang harus ditampilkan dalam kontrol, menggunakan properti drawingControlOptions dari DrawingManager.
    • position menentukan posisi kontrol gambar pada peta, dan menerima konstanta google.maps.ControlPosition.
    • drawingModes adalah array konstanta google.maps.drawing.OverlayType, dan menentukan jenis overlay yang akan disertakan dalam alat pilih bentuk kontrol gambar. Ikon tangan akan selalu ada, yang memungkinkan pengguna berinteraksi dengan peta tanpa menggambar. Urutan alat dalam kontrol akan disesuaikan dengan urutannya dalam array.
  • Setiap jenis overlay dapat diberikan satu kumpulan properti default, yang mendefinisikan penampilan overlay saat pertama kali dibuat. Properti default ini ditentukan dalam properti {overlay}Options overlay tersebut (dengan {overlay} mewakili jenis overlay). Misalnya, properti pengisian lingkaran, properti goresan, zIndex, dan kemampuan diklik dapat ditentukan dengan properti circleOptions. Jika ukuran, lokasi, atau nilai peta diteruskan, semua itu akan diabaikan. Untuk mengetahui detail selengkapnya tentang properti yang dapat ditetapkan, lihat dokumentasi Referensi API.

Catatan: Untuk membuat bentuk yang dapat diedit pengguna setelah dibuat, tetapkan properti editable-nya ke true.

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
Lihat contoh

Mencoba Contoh

Memperbarui Kontrol Alat Gambar

Setelah objek DrawingManager dibuat, Anda dapat memperbaruinya dengan memanggil setOptions() dan meneruskan nilai baru.

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

Untuk menyembunyikan atau menampilkan kontrol alat gambar:

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

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

Untuk menghapus kontrol alat gambar dari objek map:

drawingManager.setMap(null);

Menyembunyikan kontrol gambar menyebabkan kontrol alat gambar tidak ditampilkan, tetapi semua fungsi class DrawingManager masih tersedia. Dengan cara ini, Anda bisa mengimplementasikan kontrol sendiri, jika diinginkan. Menghapus DrawingManager dari objek map akan menonaktifkan semua fungsi gambar; fungsi ini harus disertakan kembali ke peta dengan drawingManager.setMap(map), atau objek DrawingManager baru yang dibuat, jika fitur gambar ingin dipulihkan.

Peristiwa Menggambar

Jika overlay bentuk telah dibuat, dua peristiwa akan diaktifkan:

  • Peristiwa {overlay}complete (dengan {overlay} mewakili jenis overlay, seperti circlecomplete, polygoncomplete, dll.). Referensi ke overlay diteruskan sebagai argumen.
  • Peristiwa overlaycomplete. Literal objek, yang berisi OverlayType dan referensi ke overlay, diteruskan sebagai argumen.
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();
  }
});

Perhatikan bahwa peristiwa google.maps.Map, seperti click dan mousemove dinonaktifkan saat menggambar pada peta.