Hình dạng và đường kẻ

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 đồ, liên kết 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òn và hình chữ nhật. Bạn cũng có thể định cấu hình các hình dạng để người dùng có thể chỉnh sửa hoặc kéo các hình dạng đó.

Hình nhiều đường

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

Thêm đường đa tuyến

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

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, độ đậm và độ mờ tuỳ chỉnh cho nét vẽ của đường trong PolylineOptions khi tạo đường hoặc bạn có thể thay đổi các thuộc tính đó sau khi tạo. Đường đa tuyến hỗ trợ các kiểu nét sau:

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

Thuộc tính editable của đường đa tuyến chỉ định liệu người dùng có thể chỉnh sửa hình dạng hay không. Xem các hình dạng có thể chỉnh sửa của người dùng ở 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 đườ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;
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
Xem ví dụ

Thử mẫu

Xoá đường đa tuyến

Để xoá một đa tuyến từ 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 đa tuyến:

flightPath.setMap(null);

Xin lưu ý rằng phương thức trên không xoá đường đa tuyến. Thao tác này sẽ xoá đường đa tuyến khỏi bản đồ. Nếu muốn xoá đường đa tuyến, bạn nên xoá đường đa tuyến đó khỏi bản đồ, sau đó đặt chính đường đa tuyến thành null.

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

Đường đa tuyến chỉ định một loạt toạ độ dưới dạng một mảng đối tượng LatLng. Các toạ độ này xác định đường dẫn của đường thẳng. Để truy xuất toạ độ, hãy gọi getPath(). Hàm này sẽ 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 tại một giá trị chỉ mục dựa trên 0 đã cho.
  • insertAt() chèn một LatLng đã truyền vào một giá trị chỉ mục dựa trên 0 đã cho. Xin lưu ý rằng mọi toạ độ hiện có tại giá trị chỉ mục đó sẽ được di chuyển về phía trước.
  • removeAt() xoá LatLng tại một giá trị chỉ mục dựa trên 0 đã cho.

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

Thử mẫu

Tuỳ chỉnh đa tuyến

Bạn có thể thêm hình ảnh dựa trên vectơ vào một đa tuyến dưới dạng biểu tượng. Với sự kết hợp của các 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 các đường đa tuyến trên bản đồ. Hãy xem phần Ký hiệu để biết thông tin về mũi tên, đường kẻ nét đứt, ký hiệu tuỳ chỉnh và ký hiệu động.

Đa giác

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

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

  • Nhiều khu vực không liền nhau được xác định bằng một hình đa giác.
  • Các khu vực có lỗ.
  • Giao điểm của một hoặc nhiều khu vực.

Để xác định một hình dạng phức tạp, bạn 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. Phương thức này xử lý việc xoắn đa giác cho bạn, giúp bạn dễ dàng vẽ đa giác có lỗ hơn. Xem tài liệu về Lớp dữ liệu.

Thêm đa giác

Vì một vùng đ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 các mảng, 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 gồm các toạ độ LatLng đã sắp xếp.

Đố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 một Polygon bằng cách sử dụng một mảng toạ độ LatLng. API JavaScript của Maps sẽ chuyển đổi آرایه đơn giản thành một mảng các mảng khi tạo và lưu trữ mảng đó trong thuộc tính paths. API cung cấp một 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 liệu người dùng có thể chỉnh sửa hình dạng hay không. Xem các hình dạng có thể chỉnh sửa của người dùng ở 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 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;
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
Xem ví dụ

Thử mẫu

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

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

Ví dụ sau giống hệt với ví dụ trước, ngoại trừ việc bỏ qua LatLng cuối cùng: ví dụ về thành phần hiển thị.

Xoá đa giác

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

bermudaTriangle.setMap(null);

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

Kiểm tra đa giác

Đa giác chỉ định một loạt toạ độ dưới dạng một mảng các mảng, trong đó mỗi mảng thuộc loại MVCArray. Mỗi mảng "lá" 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 là MVCArray, nên bạn cần thao tác và kiểm tra mảng đó bằng các thao tác sau:

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

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

Thử mẫu

Tạo lỗ trong đa giác

Để tạo một vùng trống trong đa giác, bạn cần tạo hai đường dẫn, một đường dẫn bên trong đường dẫn kia. Để tạo lỗ, toạ độ xác định đường dẫn bên trong phải theo thứ tự ngược lại với 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 đường dẫn bên trong và bên ngoài cho bạn, giúp bạn dễ dàng vẽ đa giác có lỗ hơn. 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 được cuộn theo hướng ngược 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;
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
Xem ví dụ

Thử mẫu

Các hình chữ nhật

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 Rectangle để đơn giản hoá việc tạo đối tượng.

Thêm hình chữ nhật

Rectangle tương tự như Polygon ở chỗ bạn có thể xác định màu, độ đậm và độ mờ tuỳ chỉnh cho cạnh của hình chữ nhật (nét vẽ) cũng như màu và độ mờ tuỳ chỉnh cho vùng bên trong hình chữ nhật (màu tô). Màu sắc phải được biểu thị theo kiểu HTML số 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ó thuộc tính bounds xác định hình dạng của hình chữ nhật 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 xem người dùng có thể chỉnh sửa hình dạng hay không. Xem các hình dạng có thể chỉnh sửa của người dùng ở 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;
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
Xem ví dụ

Thử mẫu

Mã sau đây 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ởi 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;
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
Xem ví dụ

Thử mẫu

Xoá 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 null làm đối số.

rectangle.setMap(null);

Xin lưu ý rằng phương thức trên không xoá hình chữ nhật. Thao tác này sẽ xoá hình chữ nhật khỏi bản đồ. 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 chính 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 hoá việc tạo các đối tượng đó.

Thêm vòng tròn

Circle tương tự như Polygon ở chỗ bạn có thể xác định màu, độ đậm và độ mờ tuỳ chỉnh cho cạnh của hình tròn (nét vẽ) cũng như màu và độ mờ tuỳ chỉnh cho vùng bên trong hình tròn (màu tô). Màu sắc phải được biểu thị theo kiểu HTML số 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 đó, một vòng tròn có thêm hai thuộc tính xác định hình dạng của vòng tròn:

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

Thuộc tính editable của vòng tròn chỉ định xem người dùng có thể chỉnh sửa hình dạng hay không. Xem các hình dạng có thể chỉnh sửa của người dùng ở 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 vòng tròn.

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

Thử mẫu

Xoá 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 null làm đối số.

circle.setMap(null);

Xin lưu ý rằng phương thức trên không xoá hình tròn. Thao tác này sẽ xoá vòng tròn khỏi bản đồ. Nếu muốn xoá vòng tròn, bạn nên xoá vòng tròn đó khỏi bản đồ, sau đó đặt chính vòng tròn đó thành null.

Các hình dạng có thể kéo và chỉnh sửa của người dùng

Việc cho phép chỉnh sửa hình dạng sẽ thêm các tay nắm vào hình dạng đó. Người dùng có thể sử dụng các tay nắm này để thay đổi vị trí, thay đổi hình dạng và thay đổi kích thước hình dạng ngay 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 đối với đối tượng sẽ 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.

Cho phép chỉnh sửa hình dạng

Bạn có thể đặt bất kỳ hình dạng nào (đường đa tuyến, đa giác, hình tròn và hình chữ nhật) thành hình dạng có thể chỉnh sửa bằng cách đặt editable thành true trong các tuỳ 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 đến 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 đa giác hoặc nhiều đường, bạn cũng nên cân nhắc việc tạo đa giác hoặc nhiều đường theo hình học địa lý bằng cách đặt thuộc tính geodesic thành true.

Đa giác geodesic sẽ giữ nguyên hình dạng địa lý thực khi được di chuyển, khiến đa giác bị méo khi di chuyển về phía bắc hoặc nam trong phép chiếu Mercator. Các đa giác không hình học sẽ luôn giữ nguyên hình dạng ban đầu trên màn hình.

Trong một đa tuyến geodesic, các đoạn của đa tuyến được vẽ dưới dạng đường đi 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, trái ngược với các đường thẳng trên phép chiếu Mercator.

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

Bản đồ sau đây cho thấy hai tam giác có kích thước và kích thước gần như giống nhau. 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 nó thay đổi khi di chuyển về phía bắc.

Xem ví dụ

Theo dõi 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 sau khi chỉnh sửa xong. Các 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

Bạn phải đặt trình nghe trên đường dẫn của đa giác. Nếu đa giác có nhiều đường dẫn, bạn phải đặt trình nghe trên mỗi đường dẫn.
Hình nhiều đường insert_at
remove_at
set_at

Bạn phải đặt trình nghe trên đường dẫn của đa tuyến.
Rectangle 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ý sự kiện chỉnh sửa trên hình chữ nhật: ví dụ về thành phần hiển thị.

Theo dõi các 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 thao tác kéo cũng như trong quá trình kéo. Các sự kiện sau đây được kích hoạt cho đa giác, đa giác, hình tròn và hình chữ nhật.

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 liên tục trong khi người dùng kéo hình dạng.
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ý sự kiện, hãy xem tài liệu về sự kiện.