Bentuk dan garis

Pilih platform: Android iOS JavaScript

Anda dapat menambahkan berbagai bentuk ke peta. Bentuk adalah sebuah objek pada peta, yang terikat dengan koordinat lintang/bujur. Bentuk berikut tersedia: garis, poligon, lingkaran, dan persegi panjang. Anda juga dapat mengonfigurasi bentuk, sehingga pengguna dapat mengedit atau menariknya.

Polyline

Untuk menggambar garis pada peta Anda, gunakan polyline. Class Polyline menentukan overlay linear segmen garis terhubung di peta. Objek Polyline terdiri dari array lokasi LatLng, dan membuat serangkaian segmen garis yang menghubungkan lokasi tersebut secara berurutan.

Menambahkan polyline

Konstruktor Polyline menggunakan sekumpulan PolylineOptions yang menentukan koordinat LatLng garis dan sekumpulan gaya untuk menyesuaikan perilaku visual polyline.

Objek Polyline digambar sebagai serangkaian segmen lurus pada peta. Anda dapat menentukan warna, bobot, dan opasitas khusus untuk goresan garis dalam PolylineOptions saat membuat garis, atau Anda dapat mengubah properti tersebut setelah pembuatan. Polyline mendukung gaya goresan berikut:

  • strokeColor menentukan warna HTML heksadesimal dari format "#FFFFFF". Class Polyline tidak mendukung warna yang diberi nama.
  • strokeOpacity menentukan nilai numerik antara 0.0 dan 1.0 untuk menentukan opasitas warna garis. Nilai default-nya adalah 1.0.
  • strokeWeight menentukan lebar garis dalam piksel.

Properti editable polyline menentukan apakah pengguna dapat mengedit bentuk atau tidak. Lihat bentuk yang dapat diedit pengguna di bawah. Demikian pula, Anda dapat menetapkan properti draggable yang memungkinkan pengguna menarik baris.

TypeScript

// This example creates a 2-pixel-wide red polyline showing the path of
// the first trans-Pacific flight between Oakland, CA, and Brisbane,
// Australia which was made by Charles Kingsford Smith.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 3,
      center: { lat: 0, lng: -180 },
      mapTypeId: "terrain",
    }
  );

  const flightPlanCoordinates = [
    { lat: 37.772, lng: -122.214 },
    { lat: 21.291, lng: -157.821 },
    { lat: -18.142, lng: 178.431 },
    { lat: -27.467, lng: 153.027 },
  ];
  const flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2,
  });

  flightPath.setMap(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

// This example creates a 2-pixel-wide red polyline showing the path of
// the first trans-Pacific flight between Oakland, CA, and Brisbane,
// Australia which was made by Charles Kingsford Smith.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 3,
    center: { lat: 0, lng: -180 },
    mapTypeId: "terrain",
  });
  const flightPlanCoordinates = [
    { lat: 37.772, lng: -122.214 },
    { lat: 21.291, lng: -157.821 },
    { lat: -18.142, lng: 178.431 },
    { lat: -27.467, lng: 153.027 },
  ];
  const flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2,
  });

  flightPath.setMap(map);
}

window.initMap = initMap;
index.js
Lihat contoh

Mencoba Contoh

Menghapus polyline

Untuk menghapus polyline dari peta, panggil metode setMap() yang meneruskan null sebagai argumen. Dalam contoh berikut, flightPath adalah objek polyline:

flightPath.setMap(null);

Perhatikan, metode di atas tidak menghapus polyline. Metode ini hanya menghapus polyline dari peta. Jika ingin menghapus polyline, Anda harus menghapusnya dari peta, kemudian menetapkan polyline itu sendiri ke null.

Memeriksa polyline

Polyline menentukan serangkaian koordinat sebagai array objek LatLng. Koordinat ini menentukan jalur garis. Untuk mengambil koordinat, panggil getPath(), yang akan menampilkan array jenis MVCArray. Anda dapat memanipulasi dan memeriksa array menggunakan operasi berikut:

  • getAt() menampilkan LatLng dengan nilai indeks berbasis nol tertentu.
  • insertAt() menyisipkan LatLng yang diteruskan dengan nilai indeks berbasis nol tertentu. Perhatikan bahwa setiap koordinat yang ada dengan nilai indeks tersebut akan digerakkan maju ke depan.
  • removeAt() menghapus LatLng dengan nilai indeks berbasis nol tertentu.

TypeScript

// This example creates an interactive map which constructs a polyline based on
// user clicks. Note that the polyline only appears once its path property
// contains two LatLng coordinates.

let poly: google.maps.Polyline;
let map: google.maps.Map;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    zoom: 7,
    center: { lat: 41.879, lng: -87.624 }, // Center the map on Chicago, USA.
  });

  poly = new google.maps.Polyline({
    strokeColor: "#000000",
    strokeOpacity: 1.0,
    strokeWeight: 3,
  });
  poly.setMap(map);

  // Add a listener for the click event
  map.addListener("click", addLatLng);
}

// Handles click events on a map, and adds a new point to the Polyline.
function addLatLng(event: google.maps.MapMouseEvent) {
  const path = poly.getPath();

  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear.
  path.push(event.latLng as google.maps.LatLng);

  // Add a new marker at the new plotted point on the polyline.
  new google.maps.Marker({
    position: event.latLng,
    title: "#" + path.getLength(),
    map: map,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

// This example creates an interactive map which constructs a polyline based on
// user clicks. Note that the polyline only appears once its path property
// contains two LatLng coordinates.
let poly;
let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 7,
    center: { lat: 41.879, lng: -87.624 }, // Center the map on Chicago, USA.
  });
  poly = new google.maps.Polyline({
    strokeColor: "#000000",
    strokeOpacity: 1.0,
    strokeWeight: 3,
  });
  poly.setMap(map);
  // Add a listener for the click event
  map.addListener("click", addLatLng);
}

// Handles click events on a map, and adds a new point to the Polyline.
function addLatLng(event) {
  const path = poly.getPath();

  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear.
  path.push(event.latLng);
  // Add a new marker at the new plotted point on the polyline.
  new google.maps.Marker({
    position: event.latLng,
    title: "#" + path.getLength(),
    map: map,
  });
}

window.initMap = initMap;
index.js
Lihat contoh

Mencoba Contoh

Menyesuaikan polyline

Anda dapat menambahkan gambar berbasis vektor ke polyline dalam bentuk simbol. Dengan kombinasi simbol dan class PolylineOptions, Anda memiliki kontrol lebih besar terhadap tampilan dan nuansa polyline pada peta. Lihat Simbol untuk informasi tentang panah, garis putus-putus, simbol khusus, dan simbol animasi.

Poligon

Poligon mewakili bidang yang dikurung oleh jalur tertutup (atau loop), yang ditentukan dengan serangkaian koordinat. Objek Polygon serupa dengan objek Polyline yang di dalamnya berisi rangkaian koordinat secara berurutan. Poligon digambar dengan goresan dan isian. Anda dapat menentukan warna, bobot, dan opasitas khusus untuk tepi poligon (goresan) dan warna serta opasitas khusus untuk bidang tertutup (isian). Warna harus ditunjukkan dalam format HTML heksadesimal. Nama warna tidak didukung.

Objek Polygon dapat mendeskripsikan bentuk yang kompleks, termasuk:

  • Beberapa bidang tak berbatasan yang ditentukan dengan satu poligon.
  • Bidang dengan lubang di dalamnya.
  • Perpotongan dari satu atau beberapa bidang.

Untuk mendefinisikan bentuk rumit, gunakan poligon dengan beberapa jalur.

Catatan: Lapisan data menyediakan cara yang mudah untuk menggambar poligon. Lapisan data ini menangani pelilitan poligon untuk Anda, sehingga lebih mudah saat menggambar poligon dengan lubang. Lihat dokumentasi untuk Lapisan data.

Menambahkan poligon

Karena bidang poligon dapat mencakup beberapa jalur terpisah, properti paths objek Polygon menentukan susunan array, masing-masing berjenis MVCArray. Setiap array menentukan urutan terpisah dari koordinat LatLng yang diurutkan.

Untuk poligon sederhana yang hanya terdiri dari satu jalur, Anda dapat membuat Polygon menggunakan satu array dari koordinat LatLng. Maps JavaScript API akan mengonversi array sederhana menjadi susunan array setelah pembuatannya jika array tersebut disimpan dalam properti paths. API ini menyediakan metode getPath() sederhana untuk poligon yang terdiri dari satu jalur.

Properti editable poligon menentukan apakah pengguna dapat mengedit bentuk atau tidak. Lihat bentuk yang dapat diedit pengguna di bawah. Demikian pula, Anda dapat menetapkan properti draggable yang memungkinkan pengguna menarik bentuknya.

TypeScript

// This example creates a simple polygon representing the Bermuda Triangle.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 5,
      center: { lat: 24.886, lng: -70.268 },
      mapTypeId: "terrain",
    }
  );

  // Define the LatLng coordinates for the polygon's path.
  const triangleCoords = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
    { lat: 25.774, lng: -80.19 },
  ];

  // Construct the polygon.
  const bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

// This example creates a simple polygon representing the Bermuda Triangle.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 5,
    center: { lat: 24.886, lng: -70.268 },
    mapTypeId: "terrain",
  });
  // Define the LatLng coordinates for the polygon's path.
  const triangleCoords = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
    { lat: 25.774, lng: -80.19 },
  ];
  // Construct the polygon.
  const bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);
}

window.initMap = initMap;
index.js
Lihat contoh

Mencoba Contoh

Penyelesaian poligon otomatis

Polygon pada contoh di atas terdiri dari empat kumpulan koordinat LatLng, tetapi perhatikan bahwa kumpulan pertama dan terakhir menentukan lokasi yang sama, yang menyelesaikan loop. Namun dalam praktiknya, karena poligon menentukan bidang tertutup, Anda tidak perlu menetapkan kumpulan koordinat terakhir. Maps JavaScript API akan otomatis menyelesaikan poligon dengan menggambar goresan yang menghubungkan lokasi terakhir ke lokasi pertama untuk jalur yang diberikan.

Contoh berikut identik dengan contoh sebelumnya, kecuali LatLng yang terakhir dihilangkan: lihat contoh.

Menghapus poligon

Untuk menghapus poligon dari peta, panggil metode setMap() yang meneruskan null sebagai argumen. Dalam contoh berikut, bermudaTriangle adalah objek poligon:

bermudaTriangle.setMap(null);

Perhatikan, metode di atas tidak menghapus poligon. Metode ini hanya menghapus poligon dari peta. Jika ingin menghapus poligon, Anda harus menghapusnya dari peta, lalu menetapkan poligon itu sendiri ke null.

Memeriksa poligon

Poligon menentukan rangkaian koordinatnya sebagai susunan array, dengan setiap array berjenis MVCArray. Setiap array "leaf" adalah array dari koordinat LatLng yang menentukan satu jalur. Untuk mengambil koordinat ini, panggil metode getPaths() objek Polygon. Karena array tersebut adalah MVCArray, Anda harus memanipulasi dan memeriksanya menggunakan operasi berikut:

  • getAt() menampilkan LatLng dengan nilai indeks berbasis nol tertentu.
  • insertAt() menyisipkan LatLng yang diteruskan dengan nilai indeks berbasis nol tertentu. Perhatikan bahwa setiap koordinat yang ada dengan nilai indeks tersebut akan digerakkan maju ke depan.
  • removeAt() menghapus LatLng dengan nilai indeks berbasis nol tertentu.

TypeScript

// This example creates a simple polygon representing the Bermuda Triangle.
// When the user clicks on the polygon an info window opens, showing
// information about the polygon's coordinates.

let map: google.maps.Map;

let infoWindow: google.maps.InfoWindow;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    zoom: 5,
    center: { lat: 24.886, lng: -70.268 },
    mapTypeId: "terrain",
  });

  // Define the LatLng coordinates for the polygon.
  const triangleCoords: google.maps.LatLngLiteral[] = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
  ];

  // Construct the polygon.
  const bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);

  // Add a listener for the click event.
  bermudaTriangle.addListener("click", showArrays);

  infoWindow = new google.maps.InfoWindow();
}

function showArrays(event: any) {
  // Since this polygon has only one path, we can call getPath() to return the
  // MVCArray of LatLngs.
  // @ts-ignore
  const polygon = this as google.maps.Polygon;
  const vertices = polygon.getPath();

  let contentString =
    "<b>Bermuda Triangle polygon</b><br>" +
    "Clicked location: <br>" +
    event.latLng.lat() +
    "," +
    event.latLng.lng() +
    "<br>";

  // Iterate over the vertices.
  for (let i = 0; i < vertices.getLength(); i++) {
    const xy = vertices.getAt(i);

    contentString +=
      "<br>" + "Coordinate " + i + ":<br>" + xy.lat() + "," + xy.lng();
  }

  // Replace the info window's content and position.
  infoWindow.setContent(contentString);
  infoWindow.setPosition(event.latLng);

  infoWindow.open(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

// This example creates a simple polygon representing the Bermuda Triangle.
// When the user clicks on the polygon an info window opens, showing
// information about the polygon's coordinates.
let map;
let infoWindow;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 5,
    center: { lat: 24.886, lng: -70.268 },
    mapTypeId: "terrain",
  });

  // Define the LatLng coordinates for the polygon.
  const triangleCoords = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
  ];
  // Construct the polygon.
  const bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);
  // Add a listener for the click event.
  bermudaTriangle.addListener("click", showArrays);
  infoWindow = new google.maps.InfoWindow();
}

function showArrays(event) {
  // Since this polygon has only one path, we can call getPath() to return the
  // MVCArray of LatLngs.
  // @ts-ignore
  const polygon = this;
  const vertices = polygon.getPath();
  let contentString =
    "<b>Bermuda Triangle polygon</b><br>" +
    "Clicked location: <br>" +
    event.latLng.lat() +
    "," +
    event.latLng.lng() +
    "<br>";

  // Iterate over the vertices.
  for (let i = 0; i < vertices.getLength(); i++) {
    const xy = vertices.getAt(i);

    contentString +=
      "<br>" + "Coordinate " + i + ":<br>" + xy.lat() + "," + xy.lng();
  }

  // Replace the info window's content and position.
  infoWindow.setContent(contentString);
  infoWindow.setPosition(event.latLng);
  infoWindow.open(map);
}

window.initMap = initMap;
index.js
Lihat contoh

Mencoba Contoh

Menempatkan lubang di poligon

Untuk membuat bidang kosong di dalam poligon, Anda harus membuat dua jalur, satu berada di dalam yang lain. Untuk membuat lubang, koordinat yang menetapkan jalur bagian dalam harus dalam urutan kebalikan dengan koordinat yang menetapkan jalur bagian luar. Misalnya, jika koordinat jalur bagian luar memiliki urutan berputar ke kanan, maka jalur bagian dalam harus berputar ke kiri.

Catatan: Lapisan data menangani urutan jalur bagian dalam dan luar untuk Anda, sehingga lebih mudah untuk menggambar poligon berlubang. Lihat dokumentasi untuk Lapisan data.

Contoh berikut menggambar poligon dengan dua jalur, dengan singgungan jalur bagian dalam di arah yang berlawanan terhadap jalur bagian luar.

TypeScript

// This example creates a triangular polygon with a hole in it.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 5,
      center: { lat: 24.886, lng: -70.268 },
    }
  );

  // Define the LatLng coordinates for the polygon's  outer path.
  const outerCoords = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
  ];

  // Define the LatLng coordinates for the polygon's inner path.
  // Note that the points forming the inner path are wound in the
  // opposite direction to those in the outer path, to form the hole.
  const innerCoords = [
    { lat: 28.745, lng: -70.579 },
    { lat: 29.57, lng: -67.514 },
    { lat: 27.339, lng: -66.668 },
  ];

  // Construct the polygon, including both paths.
  const bermudaTriangle = new google.maps.Polygon({
    paths: [outerCoords, innerCoords],
    strokeColor: "#FFC107",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FFC107",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

// This example creates a triangular polygon with a hole in it.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 5,
    center: { lat: 24.886, lng: -70.268 },
  });
  // Define the LatLng coordinates for the polygon's  outer path.
  const outerCoords = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
  ];
  // Define the LatLng coordinates for the polygon's inner path.
  // Note that the points forming the inner path are wound in the
  // opposite direction to those in the outer path, to form the hole.
  const innerCoords = [
    { lat: 28.745, lng: -70.579 },
    { lat: 29.57, lng: -67.514 },
    { lat: 27.339, lng: -66.668 },
  ];
  // Construct the polygon, including both paths.
  const bermudaTriangle = new google.maps.Polygon({
    paths: [outerCoords, innerCoords],
    strokeColor: "#FFC107",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FFC107",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);
}

window.initMap = initMap;
index.js
Lihat contoh

Mencoba Contoh

Persegi panjang

Selain class Polygon generik, Google Maps JavaScript API menyertakan class spesifik untuk objek Rectangle guna menyederhanakan konstruksinya.

Menambahkan persegi panjang

Rectangle mirip dengan Polygon karena Anda dapat menentukan warna, bobot, dan opasitas khusus untuk tepi persegi panjang (goresan) dan warna serta opasitas khusus untuk bidang dalam persegi panjang (isian). Warna harus ditunjukkan dalam gaya HTML numerik heksadesimal.

Tidak seperti Polygon, Anda tidak menentukan paths untuk Rectangle. Sebagai gantinya, persegi panjang memiliki properti bounds yang menentukan bentuknya dengan menetapkan google.maps.LatLngBounds untuk persegi panjang.

Properti editable persegi panjang menentukan apakah pengguna dapat mengedit bentuk atau tidak. Lihat bentuk yang dapat diedit pengguna di bawah. Demikian pula, Anda dapat menetapkan properti draggable yang memungkinkan pengguna menarik persegi panjang.

TypeScript

// This example adds a red rectangle to a map.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 11,
      center: { lat: 33.678, lng: -116.243 },
      mapTypeId: "terrain",
    }
  );

  const rectangle = new google.maps.Rectangle({
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
    map,
    bounds: {
      north: 33.685,
      south: 33.671,
      east: -116.234,
      west: -116.251,
    },
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

// This example adds a red rectangle to a map.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 11,
    center: { lat: 33.678, lng: -116.243 },
    mapTypeId: "terrain",
  });
  const rectangle = new google.maps.Rectangle({
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
    map,
    bounds: {
      north: 33.685,
      south: 33.671,
      east: -116.234,
      west: -116.251,
    },
  });
}

window.initMap = initMap;
index.js
Lihat contoh

Mencoba Contoh

Kode berikut membuat sebuah persegi panjang setiap kali pengguna mengubah zoom pada peta. Ukuran persegi panjang ditentukan oleh area pandang.

TypeScript

// This example creates a rectangle based on the viewport
// on any 'zoom-changed' event.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 11,
      center: { lat: 40.74852, lng: -73.981687 },
      mapTypeId: "terrain",
    }
  );

  const rectangle = new google.maps.Rectangle();

  map.addListener("zoom_changed", () => {
    // Get the current bounds, which reflect the bounds before the zoom.
    rectangle.setOptions({
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map,
      bounds: map.getBounds() as google.maps.LatLngBounds,
    });
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

// This example creates a rectangle based on the viewport
// on any 'zoom-changed' event.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 11,
    center: { lat: 40.74852, lng: -73.981687 },
    mapTypeId: "terrain",
  });
  const rectangle = new google.maps.Rectangle();

  map.addListener("zoom_changed", () => {
    // Get the current bounds, which reflect the bounds before the zoom.
    rectangle.setOptions({
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map,
      bounds: map.getBounds(),
    });
  });
}

window.initMap = initMap;
index.js
Lihat contoh

Mencoba Contoh

Menghapus persegi panjang

Untuk menghapus persegi panjang dari peta, panggil metode setMap() yang meneruskan null sebagai argumen.

rectangle.setMap(null);

Perhatikan, metode di atas tidak menghapus persegi panjang. Metode ini hanya menghapus persegi panjang dari peta. Jika ingin menghapus persegi panjang, Anda harus menghapusnya dari peta, kemudian menetapkan persegi panjang itu sendiri ke null.

Lingkaran

Selain class Polygon generik, Google Maps JavaScript API menyertakan class spesifik untuk objek Circle guna menyederhanakan konstruksinya.

Menambahkan lingkaran

Circle mirip dengan Polygon karena Anda dapat menentukan warna, bobot, dan opasitas khusus untuk tepi lingkaran (goresan) dan warna serta opasitas khusus untuk bidang dalam lingkaran (isian). Warna harus ditunjukkan dalam gaya HTML numerik heksadesimal.

Tidak seperti Polygon, Anda tidak menentukan paths untuk Circle. Sebagai gantinya, lingkaran memiliki dua properti tambahan yang mendefinisikan bentuknya:

  • center menentukan google.maps.LatLng bagian tengah lingkaran.
  • radius menentukan radius lingkaran, dalam meter.

Properti editable lingkaran menentukan apakah pengguna dapat mengedit bentuk atau tidak. Lihat bentuk yang dapat diedit pengguna di bawah. Demikian pula, Anda dapat menetapkan properti draggable yang memungkinkan pengguna menarik lingkaran.

TypeScript

// This example creates circles on the map, representing populations in North
// America.

// First, create an object containing LatLng and population for each city.

interface City {
  center: google.maps.LatLngLiteral;
  population: number;
}

const citymap: Record<string, City> = {
  chicago: {
    center: { lat: 41.878, lng: -87.629 },
    population: 2714856,
  },
  newyork: {
    center: { lat: 40.714, lng: -74.005 },
    population: 8405837,
  },
  losangeles: {
    center: { lat: 34.052, lng: -118.243 },
    population: 3857799,
  },
  vancouver: {
    center: { lat: 49.25, lng: -123.1 },
    population: 603502,
  },
};

function initMap(): void {
  // Create the map.
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: 37.09, lng: -95.712 },
      mapTypeId: "terrain",
    }
  );

  // Construct the circle for each value in citymap.
  // Note: We scale the area of the circle based on the population.
  for (const city in citymap) {
    // Add the circle for this city to the map.
    const cityCircle = new google.maps.Circle({
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map,
      center: citymap[city].center,
      radius: Math.sqrt(citymap[city].population) * 100,
    });
  }
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

const citymap = {
  chicago: {
    center: { lat: 41.878, lng: -87.629 },
    population: 2714856,
  },
  newyork: {
    center: { lat: 40.714, lng: -74.005 },
    population: 8405837,
  },
  losangeles: {
    center: { lat: 34.052, lng: -118.243 },
    population: 3857799,
  },
  vancouver: {
    center: { lat: 49.25, lng: -123.1 },
    population: 603502,
  },
};

function initMap() {
  // Create the map.
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: 37.09, lng: -95.712 },
    mapTypeId: "terrain",
  });

  // Construct the circle for each value in citymap.
  // Note: We scale the area of the circle based on the population.
  for (const city in citymap) {
    // Add the circle for this city to the map.
    const cityCircle = new google.maps.Circle({
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map,
      center: citymap[city].center,
      radius: Math.sqrt(citymap[city].population) * 100,
    });
  }
}

window.initMap = initMap;
index.js
Lihat contoh

Mencoba Contoh

Menghapus lingkaran

Untuk menghapus lingkaran dari peta, panggil metode setMap() yang meneruskan null sebagai argumen.

circle.setMap(null);

Perhatikan, metode di atas tidak menghapus lingkaran. Metode ini hanya menghapus lingkaran dari peta. Jika ingin menghapus lingkaran, Anda harus menghapusnya dari peta, kemudian menetapkan lingkaran itu sendiri ke null.

Bentuk yang dapat ditarik dan diedit pengguna

Membuat bentuk agar dapat diedit mengharuskan penambahan handle pada bentuk, yang dapat digunakan orang untuk memosisikan, membentuk ulang, dan mengubah ukuran bentuk secara langsung pada peta. Anda juga bisa membuat bentuk agar dapat ditarik, sehingga orang bisa memindahkannya ke tempat yang berbeda pada peta.

Perubahan yang dilakukan oleh pengguna pada objek tidak akan dipertahankan saat beralih sesi. Jika ingin menyimpan hasil edit pengguna, Anda harus menangkap dan menyimpan sendiri informasi tersebut.

Membuat bentuk agar dapat diedit

Semua bentuk (polyline, poligon, lingkaran, dan persegi panjang) dapat ditetapkan sebagai dapat diedit oleh pengguna, dengan menetapkan editable ke true dalam opsi bentuk.

var bounds = {
  north: 44.599,
  south: 44.490,
  east: -78.443,
  west: -78.649
};

// Define a rectangle and set its editable property to true.
var rectangle = new google.maps.Rectangle({
  bounds: bounds,
  editable: true
});

Lihat contoh

Membuat bentuk agar dapat ditarik

Secara default, bentuk yang digambar di peta akan berada pada posisi tetap. Untuk memungkinkan pengguna menarik bentuk ke lokasi yang berbeda di peta, tetapkan draggable ke true dalam opsi bentuk.

var redCoords = [
  {lat: 25.774, lng: -80.190},
  {lat: 18.466, lng: -66.118},
  {lat: 32.321, lng: -64.757}
];

// Construct a draggable red triangle with geodesic set to true.
new google.maps.Polygon({
  map: map,
  paths: redCoords,
  strokeColor: '#FF0000',
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: '#FF0000',
  fillOpacity: 0.35,
  draggable: true,
  geodesic: true
});

Saat mengaktifkan fungsi tarik pada poligon atau polyline, Anda juga harus mempertimbangkan untuk membuat poligon atau polyline geodesi, dengan menetapkan properti geodesic ke true.

Sebuah poligon geodesi akan mempertahankan bentuk geografisnya sesungguhnya saat dipindah, sehingga menyebabkan poligon tampak terdistorsi saat dipindah ke utara atau selatan dalam proyeksi Mercator. Poligon nongeodesi akan selalu mempertahankan tampilan awalnya di layar.

Dalam polyline geodesi, segmen polyline digambar sebagai jalur terpendek antara dua titik pada permukaan Bumi, dengan anggapan Bumi adalah sebuah bola, yang berlawanan dengan konsep garis lurus pada proyeksi Mercator.

Untuk informasi selengkapnya tentang sistem koordinat, lihat panduan untuk koordinat peta dan ubin.

Peta berikut ini menampilkan dua segi tiga dengan ukuran dan dimensi yang kurang-lebih sama. Segitiga merah memiliki properti geodesic yang ditetapkan ke true. Perhatikan perubahan bentuknya saat bergerak ke utara.

Lihat contoh

Memproses peristiwa pengeditan

Jika sebuah bentuk diedit, sebuah peristiwa akan diaktifkan setelah pengeditannya selesai. Peristiwa tersebut tercantum di bawah ini.

Bentuk Peristiwa
Lingkaran radius_changed
center_changed
Poligon insert_at
remove_at
set_at

Pemroses harus ditetapkan pada jalur poligon. Jika poligon memiliki beberapa jalur, pemroses harus ditetapkan pada setiap jalur.
Polyline insert_at
remove_at
set_at

Pemroses harus ditetapkan pada jalur polyline.
Persegi panjang bounds_changed

Beberapa cuplikan kode yang berguna:

google.maps.event.addListener(circle, 'radius_changed', function() {
  console.log(circle.getRadius());
});

google.maps.event.addListener(outerPath, 'set_at', function() {
  console.log('Vertex moved on outer path.');
});

google.maps.event.addListener(innerPath, 'insert_at', function() {
  console.log('Vertex removed from inner path.');
});

google.maps.event.addListener(rectangle, 'bounds_changed', function() {
  console.log('Bounds changed.');
});

Lihat contoh penanganan peristiwa pengeditan pada persegi panjang: lihat contoh.

Memproses peristiwa tarik

Jika sebuah bentuk ditarik, peristiwa akan diaktifkan di awal dan di akhir tindakan penarikan serta selama penarikan. Peristiwa berikut akan diaktifkan untuk polyline, poligon, lingkaran, dan persegi panjang.

Peristiwa Deskripsi
dragstart Diaktifkan jika pengguna mulai menarik bentuk.
drag Diaktifkan berulang kali selama pengguna menarik bentuk.
dragend Diaktifkan jika pengguna berhenti menarik bentuk.

Untuk informasi selengkapnya tentang penanganan peristiwa, lihat dokumentasi tentang peristiwa.