Hình dạng

Chọn nền tảng: Android iOS JavaScript

Bạn có thể thêm nhiều hình dạng vào bản đồ. Hình dạng là một đối tượng trên bản đồ, gắn với toạ độ vĩ độ/kinh độ. Bạn có thể sử dụng các hình dạng sau: đường, đa giác, vòng trònhình chữ nhật. Bạn cũng có thể định cấu hình hình dạng để người dùng có thể chỉnh sửa hoặc kéo hình dạng đó.

Hình nhiều đường

Để vẽ một đường kẻ trên bản đồ, hãy dùng hình nhiều đường. Lớp Polyline xác định lớp phủ tuyến tính của các đoạn đường đã kết nối trên bản đồ. Đối tượng Polyline bao gồm một loạt các vị trí LatLng và tạo một loạt phân đoạn đường kẻ kết nối các vị trí đó theo trình tự.

Thêm một hình nhiều đường

Hàm khởi tạo Polyline lấy một tập hợp PolylineOptions chỉ định toạ độ LatLng của đường kẻ và một tập hợp các kiểu để điều chỉnh hành vi hình ảnh của polyline.

Các đối tượng Polyline được vẽ dưới dạng một loạt các đoạn thẳng trên bản đồ. Bạn có thể chỉ định màu sắc, trọng số và độ mờ tuỳ chỉnh cho nét vẽ của đường kẻ trong PolylineOptions khi tạo đường kẻ hoặc bạn có thể thay đổi các thuộc tính đó sau khi xây dựng. Hình nhiều đường hỗ trợ các kiểu nét sau:

  • strokeColor chỉ định màu HTML thập lục phân của định dạng "#FFFFFF". Lớp Polyline không hỗ trợ màu sắc được đặt tên.
  • strokeOpacity chỉ định một giá trị số giữa 0.01.0 để xác định độ mờ của màu đường kẻ. Giá trị mặc định là 1.0.
  • strokeWeight chỉ định chiều rộng của đường tính bằng pixel.

Thuộc tính editable của hình nhiều đường chỉ định xem người dùng có thể chỉnh sửa hình dạng hay không. Hãy xem phần hình dạng mà người dùng có thể chỉnh sửa bên dưới. Tương tự như vậy, bạn có thể đặt thuộc tính draggable để cho phép người dùng kéo dòng.

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;

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;
Xem ví dụ

Thử mẫu

Xoá đa giác

Để xoá một polyline khỏi bản đồ, hãy gọi phương thức setMap() truyền null làm đối số. Trong ví dụ sau, flightPath là một đối tượng nhiều đường:

flightPath.setMap(null);

Lưu ý là phương thức trên không xóa đa hình. Thao tác này sẽ xoá đa giác khỏi bản đồ. Thay vào đó, nếu muốn xóa polyline, bạn nên xóa polyline đó khỏi bản đồ, sau đó đặt polyline chính là null.

Kiểm tra hình nhiều đường

Một đường đa giác chỉ định một loạt toạ độ dưới dạng một mảng các đối tượng LatLng. Những toạ độ này xác định đường dẫn của đường kẻ. Để truy xuất toạ độ, hãy gọi getPath() để trả về một mảng thuộc loại MVCArray. Bạn có thể thao tác và kiểm tra mảng bằng các thao tác sau:

  • getAt() trả về LatLng ở một giá trị chỉ mục dựa trên 0 nhất định.
  • insertAt() chèn một LatLng đã truyền ở một giá trị chỉ mục dựa trên 0 nhất định. Xin lưu ý rằng mọi toạ độ hiện tại ở giá trị chỉ mục đó sẽ được chuyển về phía trước.
  • removeAt() sẽ xoá LatLng ở một giá trị chỉ mục dựa trên 0 nhất định.

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;

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;
Xem ví dụ

Thử mẫu

Tuỳ chỉnh hình nhiều đường

Bạn có thể thêm hình ảnh dựa trên vectơ vào hình nhiều đường ở dạng ký hiệu. Với sự kết hợp giữa ký hiệu và lớp PolylineOptions, bạn có nhiều quyền kiểm soát đối với giao diện của nhiều đường trên bản đồ. Vui lòng xem qua Biểu tượng để biết thông tin về mũi tên, đường đứt nét, biểu tượng tùy chỉnhbiểu tượng động.

Đa giác

Đa giác thể hiện một khu vực được bao quanh bởi một đường dẫn khép kín (hoặc vòng lặp), được xác định bằng một chuỗi toạ độ. Các đối tượng Polygon cũng tương tự như các đối tượng Polyline vì có bao gồm một loạt các toạ độ theo một trình tự nhất định. Đa giác được vẽ bằng một nét gạch và một màu nền. Bạn có thể xác định màu tuỳ chỉnh, trọng số và độ mờ cho cạnh của đa giác (đường nét) cũng như màu sắc và độ mờ tùy chỉnh cho vùng kèm theo (màu tô). Màu sắc phải được chỉ báo ở định dạng HTML thập lục phân. Tên màu không được hỗ trợ.

Các đối tượng Polygon có thể mô tả hình dạng phức tạp, bao gồm:

  • Nhiều vùng không liền kề được xác định bởi một đa giác đơn.
  • Khu vực có lỗ.
  • Giao lộ của một hoặc nhiều khu vực.

Để xác định hình dạng phức tạp, bạn hãy sử dụng đa giác có nhiều đường dẫn.

Lưu ý: Lớp dữ liệu cung cấp một cách đơn giản để vẽ đa giác. Tính năng này xử lý việc uốn lượn đa giác cho bạn, giúp bạn vẽ các đa giác có lỗ dễ dàng hơn. Hãy xem tài liệu về lớp Dữ liệu.

Thêm đa giác

Vì một khu vực đa giác có thể bao gồm nhiều đường dẫn riêng biệt, nên thuộc tính paths của đối tượng Polygon chỉ định một mảng (array), mỗi mảng thuộc loại MVCArray. Mỗi mảng xác định một trình tự riêng biệt của các toạ độ LatLng được sắp xếp theo thứ tự.

Đối với các đa giác đơn giản chỉ bao gồm một đường dẫn, bạn có thể tạo Polygon bằng một mảng toạ độ LatLng. API Maps JavaScript sẽ chuyển đổi mảng đơn giản thành một mảng mảng khi tạo khi lưu trữ mảng đó trong thuộc tính paths. API này cung cấp phương thức getPath() đơn giản cho các đa giác bao gồm một đường dẫn.

Thuộc tính editable của đa giác chỉ định việc người dùng có thể chỉnh sửa hình dạng hay không. Xem các hình dạng người dùng có thể chỉnh sửa dưới đây. Tương tự, bạn có thể đặt thuộc tính draggable để cho phép người dùng kéo hình dạng.

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;

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;
Xem ví dụ

Thử mẫu

Tự động hoàn thành đa giác

Polygon trong ví dụ trên bao gồm bốn bộ toạ độ LatLng, nhưng hãy lưu ý rằng nhóm đầu tiên và cuối cùng xác định cùng một vị trí, việc này đòi hỏi phải hoàn tất vòng lặp. Tuy nhiên, trên thực tế, vì đa giác xác định các khu vực đã đóng, nên bạn không cần chỉ định bộ toạ độ cuối cùng. API JavaScript của Maps sẽ tự động hoàn thành đa giác bằng cách vẽ một nét gạch kết nối vị trí cuối cùng với vị trí đầu tiên cho mọi đường dẫn cụ thể.

Ví dụ sau giống với ví dụ trước, ngoại trừ LatLng cuối cùng bị bỏ qua: xem ví dụ.

Xoá một đa giác

Để xoá một đa giác khỏi bản đồ, hãy gọi phương thức setMap() truyền null làm đối số. Trong ví dụ sau, bermudaTriangle là một đối tượng đa giác:

bermudaTriangle.setMap(null);

Lưu ý rằng phương pháp trên không xóa đa giác. Nó sẽ xóa đa giác khỏi bản đồ. Ngược lại, nếu bạn muốn xoá đa giác, bạn nên xoá đa giác đó khỏi bản đồ, sau đó đặt chính nó cho đa giác thành null.

Kiểm tra đa giác

Đa giác chỉ định chuỗi toạ độ dưới dạng một mảng gồm các mảng, trong đó mỗi mảng thuộc loại MVCArray. Mỗi mảng "leaf" là một mảng toạ độ LatLng chỉ định một đường dẫn duy nhất. Để truy xuất các toạ độ này, hãy gọi phương thức getPaths() của đối tượng Polygon. Vì mảng này là một MVCArray, nên bạn sẽ cần thao tác và kiểm tra mảng đó bằng các thao tác sau:

  • getAt() trả về LatLng ở một giá trị chỉ mục dựa trên 0 nhất định.
  • insertAt() chèn một LatLng đã truyền ở một giá trị chỉ mục dựa trên 0 nhất định. Xin lưu ý rằng mọi toạ độ hiện tại ở giá trị chỉ mục đó sẽ được chuyển về phía trước.
  • removeAt() sẽ xoá LatLng ở một giá trị chỉ mục dựa trên 0 nhất định.

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;

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;
Xem ví dụ

Thử mẫu

Đặt một lỗ vào đa giác

Để tạo một vùng trống trong một đa giác, bạn cần tạo hai đường dẫn, một đường dẫn nằm bên trong đường dẫn kia. Để tạo lỗ, các toạ độ xác định đường dẫn bên trong phải theo thứ tự ngược lại với các toạ độ xác định đường dẫn bên ngoài. Ví dụ: nếu toạ độ của đường dẫn bên ngoài theo thứ tự kim đồng hồ thì đường dẫn bên trong phải ngược chiều kim đồng hồ.

Lưu ý: Lớp dữ liệu xử lý thứ tự của các đường dẫn bên trong và bên ngoài cho bạn, giúp bạn vẽ các đa giác có lỗ dễ dàng hơn. Hãy xem tài liệu về lớp Dữ liệu.

Ví dụ sau đây vẽ một đa giác có hai đường dẫn, trong đó đường dẫn bên trong bị cuốn theo hướng ngược lại với đường dẫn bên ngoài.

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;

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;
Xem ví dụ

Thử mẫu

Các hình chữ nhật

Ngoài một lớp Polygon chung, API JavaScript của Google Maps còn bao gồm một lớp cụ thể cho các đối tượng Rectangle, để đơn giản hóa quá trình tạo bản dựng.

Thêm hình chữ nhật

Rectangle tương tự như Polygon ở chỗ bạn có thể xác định màu tuỳ chỉnh, trọng số và độ mờ cho cạnh của hình chữ nhật (nét chữ) cũng như màu sắc và độ mờ tuỳ chỉnh cho vùng trong hình chữ nhật (màu nền). Màu sắc phải được chỉ báo theo kiểu HTML thập lục phân.

Không giống như Polygon, bạn không xác định paths cho Rectangle. Thay vào đó, hình chữ nhật có một thuộc tính bounds xác định hình dạng của nó bằng cách chỉ định google.maps.LatLngBounds cho hình chữ nhật đó.

Thuộc tính editable của hình chữ nhật chỉ định việc người dùng có thể chỉnh sửa hình dạng hay không. Hãy xem phần hình dạng mà người dùng có thể chỉnh sửa bên dưới. Tương tự, bạn có thể đặt thuộc tính draggable để cho phép người dùng kéo hình chữ nhật.

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;

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;
Xem ví dụ

Thử mẫu

Mã sau đây sẽ tạo một hình chữ nhật mỗi khi người dùng thay đổi mức thu phóng trên bản đồ. Kích thước của hình chữ nhật được xác định bằng khung nhìn.

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;

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;
Xem ví dụ

Thử mẫu

Xóa hình chữ nhật

Để xoá một hình chữ nhật khỏi bản đồ, hãy gọi phương thức setMap() truyền đối số null làm đối số.

rectangle.setMap(null);

Lưu ý là phương thức trên không xóa hình chữ nhật. Thao tác này sẽ xóa hình chữ nhật khỏi bản đồ. Ngược lại, nếu muốn xoá hình chữ nhật, bạn nên xoá hình chữ nhật đó khỏi bản đồ, sau đó đặt hình chữ nhật đó thành null.

Vòng tròn

Ngoài lớp Polygon chung, API JavaScript của Google Maps còn bao gồm một lớp cụ thể cho các đối tượng Circle, để đơn giản hóa quá trình tạo bản dựng.

Thêm vòng kết nối

Circle tương tự như Polygon ở chỗ bạn có thể xác định màu tuỳ chỉnh, trọng số và độ mờ cho cạnh của vòng tròn (đường nét) cũng như màu sắc và độ mờ tuỳ chỉnh cho khu vực trong vòng tròn (màu nền). Màu sắc phải được biểu thị bằng kiểu HTML thập lục phân.

Không giống như Polygon, bạn không xác định paths cho Circle. Thay vào đó, vòng tròn có hai thuộc tính bổ sung giúp xác định hình dạng của nó:

  • center chỉ định google.maps.LatLng ở giữa vòng tròn.
  • radius chỉ định bán kính của hình tròn, tính bằng mét.

Thuộc tính editable của vòng tròn chỉ định việc người dùng có thể chỉnh sửa hình dạng hay không. Xem các hình dạng người dùng có thể chỉnh sửa dưới đây. Tương tự, bạn có thể đặt thuộc tính draggable để cho phép người dùng kéo vòng kết nối.

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;

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;
Xem ví dụ

Thử mẫu

Xóa vòng kết nối

Để xoá một vòng tròn khỏi bản đồ, hãy gọi phương thức setMap() truyền đối số null làm đối số.

circle.setMap(null);

Lưu ý là phương thức trên không xóa vòng kết nối. Thao tác này sẽ xoá vòng tròn khỏi bản đồ. Thay vào đó, nếu bạn muốn xóa vòng kết nối, bạn nên xóa vòng kết nối đó khỏi bản đồ và sau đó đặt vòng tròn thành null.

Hình dạng người dùng có thể chỉnh sửa và kéo được

Việc tạo một hình dạng có thể chỉnh sửa sẽ thêm ô điều khiển cho hình dạng đó. Mọi người có thể dùng nó để định vị lại, định hình lại và đổi kích thước hình dạng trực tiếp trên bản đồ. Bạn cũng có thể tạo một hình dạng có thể kéo để mọi người có thể di chuyển hình dạng đó đến một vị trí khác trên bản đồ.

Các thay đổi do người dùng thực hiện cho đối tượng không tồn tại giữa các phiên. Nếu muốn lưu nội dung chỉnh sửa của người dùng, bạn phải tự thu thập và lưu trữ thông tin đó.

Tạo một hình có thể chỉnh sửa

Bạn có thể đặt bất kỳ hình dạng nào (đa đường, đa giác, vòng tròn và hình chữ nhật) có thể chỉnh sửa bằng cách đặt editable thành true trong các tùy chọn của hình dạng.

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
});

Xem ví dụ

Tạo hình dạng có thể kéo

Theo mặc định, hình dạng được vẽ trên bản đồ sẽ được cố định ở vị trí. Để cho phép người dùng kéo một hình dạng vào một vị trí khác trên bản đồ, hãy đặt draggable thành true trong các tuỳ chọn hình dạng.

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
});

Khi bật tính năng kéo trên một đa giác hoặc nhiều đường, bạn cũng nên xem xét việc tạo đa giác hoặc đa giác, bằng cách đặt thuộc tính geodesic của nó thành true.

Một đa giác trắc địa sẽ giữ lại hình dạng địa lý thực sự khi di chuyển, làm cho đa giác trông có vẻ bị méo khi được di chuyển lên phía bắc hoặc phía nam trong phép chiếu ValueTrack. Các đa giác không trắc địa sẽ luôn giữ nguyên giao diện ban đầu trên màn hình.

Trong một đường đa giác trắc địa, các đoạn của đường đó sẽ được vẽ dưới dạng đường dẫn ngắn nhất giữa hai điểm trên bề mặt Trái Đất, giả sử Trái Đất là một hình cầu, khác với đường thẳng trên phép chiếu ValueTrack.

Để biết thêm thông tin về hệ toạ độ, hãy tham khảo hướng dẫn về bản đồ ánh xạ và toạ độ.

Bản đồ sau đây cho thấy hai tam giác có cùng kích thước và kích thước. Hình tam giác màu đỏ có thuộc tính geodesic được đặt thành true. Hãy chú ý đến cách hình dạng của yếu tố này thay đổi khi di chuyển về phía bắc.

Xem ví dụ

Nghe các sự kiện chỉnh sửa

Khi một hình dạng được chỉnh sửa, một sự kiện sẽ được kích hoạt khi hoàn tất chỉnh sửa. Những sự kiện này được liệt kê dưới đây.

Hình dạng Sự kiện
Hình tròn radius_changed
center_changed
Đa giác insert_at
remove_at
set_at

Trình nghe phải được đặt trên đường dẫn của đa giác. Nếu đa giác có nhiều đường dẫn, thì bạn phải thiết lập trình nghe trên mỗi đường dẫn.

Hình nhiều đường insert_at
remove_at
set_at

Trình nghe phải được đặt trên đường dẫn của hình nhiều đường.

Hình chữ nhật bounds_changed

Một số đoạn mã hữu ích:

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.');
});

Xem ví dụ về cách xử lý một sự kiện chỉnh sửa trên hình chữ nhật: xem ví dụ.

Nghe sự kiện kéo

Khi một hình dạng được kéo, các sự kiện sẽ được kích hoạt khi bắt đầu và kết thúc hành động kéo cũng như trong quá trình kéo. Các sự kiện sau đây được kích hoạt cho nhiều đường, đa giác, hình tròn và hình chữ nhật.

Event (Sự kiện) Mô tả
dragstart Được kích hoạt khi người dùng bắt đầu kéo hình dạng.
drag Được kích hoạt nhiều lần trong khi người dùng kéo hình.
dragend Được kích hoạt khi người dùng ngừng kéo hình dạng.

Để biết thêm về cách xử lý các sự kiện, hãy xem tài liệu về sự kiện.