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 đồ, được liên kết với vĩ độ/kinh độ. Có các hình dạng sau: đường kẻ, đa giác, hình trònhì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 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 được kết nối trên bản đồ. Đối tượng Polyline bao gồm một mảng LatLng vị trí và tạo một chuỗi phân đoạn đường kẻ kết nối các vị trí đó theo thứ tự có thứ tự.

Thêm 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 trực quan của hình nhiều đường.

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

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

Thuộc tính editable của hình nhiều đường chỉ định liệu người dùng có thể chỉnh sửa hình dạng hay không. Hãy xem các 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 đườ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

Loại bỏ hình nhiều đường

Để xoá một hình nhiều đường 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à đối tượng hình nhiều đường:

flightPath.setMap(null);

Lưu ý rằng phương thức trên không xoá hình nhiều đường. Phương thức này sẽ xoá hình nhiều đường khỏi bản đồ. Thay vào đó, nếu muốn xoá hình nhiều đường, bạn nên xoá hình nhiều đường đó khỏi bản đồ và sau đó đặt chính hình nhiều đường đó thành null.

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

Hình nhiều đường chỉ định một chuỗi toạ độ dưới dạng một mảng các đối tượng LatLng. Những toạ độ này xác định đường đi của đường. Để truy xuất toạ độ, hãy gọi getPath(). Phương thức 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 bắt đầu từ 0 cho trước.
  • insertAt() chèn một LatLng đã truyền vào một giá trị chỉ mục gốc 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 gốc 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;

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ưới dạng biểu tượng. Với sự kết hợp các ký hiệu và lớp PolylineOptions, bạn có nhiều quyền kiểm soát hơn đối với giao diện của hình nhiều đường trên bản đồ. Vui lòng xem phần Biểu tượng để biết thông tin về arrows, đường nét đứt, biểu tượng tuỳ chỉnhbiểu tượng động.

Đa giác

Đa giác đại diện cho 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ạ độ. Đối tượng Polygon tương tự như đối tượng Polyline ở chỗ chúng bao gồm một chuỗi toạ độ theo một 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, trọng số 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 khu vực kèm theo (màu nền). Màu phải được biểu thị ở định dạng HTML thập lục phân. Tên màu không được hỗ trợ.

Đố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 tiếp giáp được xác định bởi một đa giác duy nhất.
  • Các vùng có lỗ hổng.
  • 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 với nhiều đường dẫn.

Lưu ý: Lớp dữ liệu mang đến một cách đơn giản để vẽ đa giác. Công cụ này sẽ xử lý việc hình đa giác quanh co, giúp bạn vẽ đa giác có lỗ dễ dàng hơn. Xem tài liệu về Lớp dữ liệu.

Thêm đa giác

Do 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 các mảng, mỗi mảng thuộc loại MVCArray. Mỗi mảng xác định một chuỗi toạ độ LatLng theo thứ tự riêng biệ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 JavaScript của Maps sẽ chuyển đổi mảng đơn giản thành một mảng gồm các mảng khi xây dựng khi lưu trữ trong thuộc tính paths. API này 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. Hãy xem các 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 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 4 tập toạ độ LatLng, nhưng lưu ý rằng tập hợp đầu tiên và tập hợp cuối cùng xác định cùng một vị trí, giúp hoàn thành 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 tập toạ độ cuối cùng. API JavaScript của Maps sẽ tự động hoàn thiện đa giác bằng cách vẽ một nét vẽ kết nối vị trí cuối cùng với vị trí đầu tiên của một đường dẫn bất kỳ.

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ụ.

Loại bỏ đa giác

Để xoá đ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 xoá đa giác. Phương thức này sẽ xoá đa giác khỏi bản đồ. Nếu muốn xóa đa giác đó, bạn nên xóa đa giác đó khỏi bản đồ, sau đó đặt chính đa giác đó thành null.

Kiểm tra đa giác

Một đa giác chỉ định chuỗi toạ độ dưới dạng một mảng mảng, trong đó mỗi mảng thuộc loại MVCArray. Mỗi mảng "leaf" là một mảng các toạ độ LatLng xác đị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à 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 tại một giá trị chỉ mục bắt đầu từ 0 cho trước.
  • insertAt() chèn một LatLng đã truyền vào một giá trị chỉ mục gốc 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 gốc 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;

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 một đa giác

Để tạo một khu vực 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 còn lại. Để 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 ngoài theo chiều 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ẽ đa giác có lỗ dễ dàng 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 vẽ 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 hoá việc xây dựng các đối tượng đó.

Thêm một hình chữ nhật

Rectangle tương tự như Polygon, ở chỗ bạn có thể xác định màu sắc, trọng số và độ mờ tuỳ chỉnh cho cạnh của hình chữ nhật (Nét vẽ) cũng như màu tuỳ chỉnh và độ mờ cho khu vực trong hình chữ nhật (màu nền). Màu 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 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 liệu người dùng có thể chỉnh sửa hình dạng hay không. Hãy xem các 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 theo 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

Loại bỏ 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);

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 đồ rồi đặ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 xây dựng các đối tượ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 sắc, trọng số và độ mờ tuỳ chỉnh cho cạnh của vòng tròn (nét vẽ) cũng như màu tuỳ chỉnh và độ mờ cho khu vực trong vòng tròn (màu nền). Màu 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 đó, hình tròn có hai thuộc tính bổ sung giúp xác định hình dạng của hình tròn:

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

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

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

circle.setMap(null);

Lưu ý rằng phương pháp 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 kết nối thành null.

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

Thao tác tạo một hình dạng có thể chỉnh sửa sẽ thêm ô điều khiển vào hình dạng, và mọi người có thể sử dụng ô điều khiển này để định vị lại, đổi hình dạng và đổ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 đó đế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 không tồn tại giữa các phiên. Nếu muốn lưu các 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 đó.

Làm cho hình dạng có thể chỉnh sửa được

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

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 được

Theo mặc định, một hình dạng được vẽ trên bản đồ sẽ được đặt 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 một đa giác hoặc hình nhiều đường, bạn cũng nên xem xét việc tạo dữ liệu trắc địa đa giác hoặc hình nhiều đường bằng cách đặt thuộc tính geodesic của đối tượng đó thành true.

Một đa giác đo lường sẽ giữ nguyên hình dạng địa lý thực sự khi di chuyển, khiến đa giác có vẻ méo mó khi bị di chuyển về phía bắc hoặc phía nam trong phép chiếu lãi suất tối đa. Đa giác phi địa hình sẽ luôn giữ nguyên hình thức ban đầu trên màn hình.

Trong một hình nhiều đường trắc địa, các đoạn của hình đa giác đượ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 Pror.

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

Bản đồ sau đây hiển thị hai hình 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ú ý cách hình dạng của thiên hà 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, sự kiện sẽ được kích hoạt sau khi hoàn tất việc chỉnh sửa. Dưới đây là danh sách các sự kiện nà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, bạn phải đặt một 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.

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 một hình chữ nhật: ví dụ về khung hiển thị.

Theo dõi các sự kiện kéo

Khi bạn kéo một hình dạng, 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 sẽ được kích hoạt cho hình nhiều đường kẻ, đa giác, hình tròn và hình chữ nhật.

Sự kiện Nội dung 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 đang 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 thông tin về cách xử lý sự kiện, hãy xem tài liệu về sự kiện.