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 đồ, được liên kết với toạ độ vĩ độ/kinh độ. Bạn có thể sử dụng các hình dạng sau: đường kẻ, đa giác, hình 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 chúng.

Đường đa tuyến

Để vẽ một đường kẻ trên bản đồ, hãy dùng đường nhiều đoạn. Lớp Polyline xác định một lớp phủ tuyến tính gồm 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 gồm các vị trí LatLng và tạo một chuỗi các đoạn thẳng kết nối những vị trí đó theo một trình tự có thứ tự.

Thêm một đường nhiều đoạn

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

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 sắc, độ dày và độ mờ tuỳ chỉnh cho nét 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 tạo. Đường nhiều đoạn hỗ trợ các kiểu nét vẽ sau:

  • strokeColor chỉ định một màu HTML thập lục phân có định dạng "#FFFFFF". Lớp Polyline không hỗ trợ màu có tên.
  • strokeOpacity chỉ định một giá trị bằng số trong khoảng từ 0.0 đến 1.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 kẻ tính bằng pixel.

Thuộc tính editable của đường nhiều đoạ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 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.

Ví dụ này tạo ra một đường nhiều đoạn màu đỏ có chiều rộng 2 pixel, cho thấy đường bay của chuyến bay xuyên Thái Bình Dương đầu tiên giữa Oakland, California và Brisbane, Úc.

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ụ

Dùng thử đoạn nhạc

Xoá một đường nhiều đoạn

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

flightPath.setMap(null);

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

Kiểm tra một đường nhiều đoạn

Đường nhiều đoạn chỉ định một chuỗi toạ độ dưới dạng một mảng các đối tượng LatLng. Các toạ độ này xác định đường dẫn của đường kẻ. Để 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 tại một giá trị chỉ mục bắt đầu từ 0 nhất định. Xin lưu ý rằng mọi toạ độ hiện có tại giá trị chỉ mục đó sẽ được chuyển tiếp.
  • removeAt() sẽ xoá một LatLng tại một giá trị chỉ mục dựa trên 0 nhất định.

Ví dụ sau đây minh hoạ cách tạo một đường nhiều đoạn dựa trên các lượt nhấp (nhấp vào bản đồ để thêm mộ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;
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ụ

Dùng thử đoạn nhạc

Tuỳ chỉnh một đường nhiều đoạn

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

Đa giác

Đa giác biểu thị một vùng được bao quanh bởi một đường khép 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 chuỗi toạ độ theo trình tự có thứ tự. Đa giác được vẽ bằng một nét vẽ và một màu nền. Bạn có thể xác định màu sắc, độ đậm và độ mờ tuỳ chỉnh cho cạnh của đa giác (nét vẽ) cũng như màu sắc và độ mờ tuỳ chỉnh cho vùng kín (vùng tô). Màu sắc phải được biểu thị ở định dạng HTML thập lục phân. Không hỗ trợ tên màu.

Các đố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 kề được xác định bằng một đa giác duy nhất.
  • Những 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 dùng một đ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. Nó xử lý hướng đa giác cho bạn, giúp bạn dễ dàng vẽ các đa giác có lỗ. 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 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 riêng biệt gồm 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 duy nhất gồm các toạ độ LatLng. API JavaScript của Maps sẽ chuyển đổi mảng đơn giản thành một mảng các mảng khi tạo bằng cách lưu trữ mảng đó 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 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 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;
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ụ

Dùng thử đoạn nhạc

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 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í, 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 khép kín, nên bạn không cần chỉ định bộ 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 một đường dẫn bất kỳ.

Ví dụ sau đây giống hệt ví dụ trước, ngoại trừ việc 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() bằng cách 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 đồ, rồi đặt chính đ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 các mảng, trong đó mỗi mảng thuộc loại MVCArray. Mỗi mảng "leaf" là một mảng gồm các 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, 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 dựa trên 0 đã cho.
  • insertAt() chèn một LatLng đã truyền tại một giá trị chỉ mục bắt đầu từ 0 nhất định. Xin lưu ý rằng mọi toạ độ hiện có tại giá trị chỉ mục đó sẽ được chuyển tiếp.
  • removeAt() sẽ xoá một LatLng tại 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;
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ụ

Dùng thử đoạn nhạc

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 2 đườ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 chiều kim đồng hồ thì đường dẫn bên trong phải theo chiều ngược chiều kim đồng hồ.

Lưu ý: Lớp Dữ liệu sẽ 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 dễ dàng vẽ các đa giác có lỗ. 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 được quấ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;
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ụ

Dùng thử đoạn nhạc

Các hình chữ nhật

Ngoài lớp Polygon chung, API JavaScript của Google Maps còn có một lớp cụ thể cho các đối tượng Rectangle để đơn giản hoá việc tạo các đối tượng này.

Thêm hình chữ nhật

Rectangle tương tự như Polygon ở chỗ bạn có thể xác định màu sắc, độ dày và độ mờ tuỳ chỉnh cho cạnh của hình chữ nhật (nét vẽ) cũng như màu sắc và độ mờ tuỳ chỉnh cho vùng bên trong hình chữ nhật (vùng tô). Bạn nên chỉ định màu theo kiểu HTML dạng 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 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 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;
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ụ

Dùng thử đoạn nhạc

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

Dùng thử đoạn nhạc

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() bằng cách 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 đồ, 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 có 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 này.

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, độ dày và độ mờ tuỳ chỉnh cho cạnh của hình tròn (nét vẽ) cũng như màu sắc và độ mờ tuỳ chỉnh cho vùng bên trong hình tròn (phần tô). Bạn nên chỉ định màu theo kiểu HTML bằng 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ó thêm 2 thuộc tính xác định hình dạng của hình tròn:

  • center chỉ định google.maps.LatLng của tâm đườ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 hình 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 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.

Ví dụ sau đây sử dụng các vòng tròn để cho biết thời gian đi bộ ước chừng giữa các địa điểm ở Kyoto, Nhật Bản. Chọn khoảng cách cần thiết trong trình đơn, nhấp vào bản đồ để đặt lại tâm vòng tròn và kéo vòng tròn để định vị lại.

TypeScript

const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
let innerMap;

async function initMap() {
    // Import the needed libraries.
    // Request needed libraries.
    (await google.maps.importLibrary('maps')) as google.maps.MapsLibrary;
    (await google.maps.importLibrary('marker')) as google.maps.MarkerLibrary;
    // Get the gmp-map element.
    const mapElement = document.querySelector(
        'gmp-map'
    ) as google.maps.MapElement;

    const initialCenter = { lat: 34.98956821576194, lng: 135.74239981260283 }; // Hotel Emion, Kyoto, Japan

    // Get the inner map.
    const innerMap = mapElement.innerMap;

    const buttons = document.querySelectorAll('input[name="radius"]');

    const walkingCircle = new google.maps.Circle({
        strokeColor: '#ffdd00ff',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#ffdd00ff',
        fillOpacity: 0.35,
        map: innerMap,
        center: initialCenter,
        radius: 400,
        draggable: true,
        editable: false,
    });

    // Define a "Crosshair" vector icon
    const parser = new DOMParser();
    const svgString = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="-6 -6 12 12"><path d="M -6,0 L 6,0 M 0,-6 L 0,6" stroke="black" stroke-width="1"/></svg>`;

    const pinSvg = parser.parseFromString(
        svgString,
        'image/svg+xml'
    ).documentElement;

    const centerMarker = new google.maps.marker.AdvancedMarkerElement({
        position: initialCenter,
        title: 'A marker using a custom SVG image.',
        //@ts-ignore
        anchorLeft: '-50%',
        anchorTop: '-50%',
    });
    centerMarker.append(pinSvg);
    mapElement.append(centerMarker);

    // Wait for the map to finish drawing its tiles.
    google.maps.event.addListenerOnce(innerMap, 'tilesloaded', function () {
        // Get the controls div
        const controls = document.getElementById('control-panel');

        // Display controls once map is loaded.
        if (controls) {
            controls.style.display = 'block';
        }
    });

    // Add event listener to update the radius based on user selection.
    buttons.forEach((button) => {
        button.addEventListener('change', (event) => {
            const target = event.target as HTMLInputElement;
            walkingCircle.setRadius(Number(target.value));
        });
    });

    // Handle user click, reset the map center and position the circle.
    innerMap.addListener('click', (mapsMouseEvent) => {
        const newCenter = mapsMouseEvent.latLng;
        walkingCircle.setCenter(newCenter);
        centerMarker.position = newCenter;
        innerMap.panTo(newCenter);
    });

    // Handle user dragging the circle, update the center marker position.
    walkingCircle.addListener('center_changed', () => {
        centerMarker.position = walkingCircle.getCenter();
    });
}

initMap();
index.ts

JavaScript

const mapElement = document.querySelector('gmp-map');
let innerMap;
async function initMap() {
    // Import the needed libraries.
    // Request needed libraries.
    (await google.maps.importLibrary('maps'));
    (await google.maps.importLibrary('marker'));
    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map');
    const initialCenter = { lat: 34.98956821576194, lng: 135.74239981260283 }; // Hotel Emion, Kyoto, Japan
    // Get the inner map.
    const innerMap = mapElement.innerMap;
    const buttons = document.querySelectorAll('input[name="radius"]');
    const walkingCircle = new google.maps.Circle({
        strokeColor: '#ffdd00ff',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#ffdd00ff',
        fillOpacity: 0.35,
        map: innerMap,
        center: initialCenter,
        radius: 400,
        draggable: true,
        editable: false,
    });
    // Define a "Crosshair" vector icon
    const parser = new DOMParser();
    const svgString = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="-6 -6 12 12"><path d="M -6,0 L 6,0 M 0,-6 L 0,6" stroke="black" stroke-width="1"/></svg>`;
    const pinSvg = parser.parseFromString(svgString, 'image/svg+xml').documentElement;
    const centerMarker = new google.maps.marker.AdvancedMarkerElement({
        position: initialCenter,
        title: 'A marker using a custom SVG image.',
        //@ts-ignore
        anchorLeft: '-50%',
        anchorTop: '-50%',
    });
    centerMarker.append(pinSvg);
    mapElement.append(centerMarker);
    // Wait for the map to finish drawing its tiles.
    google.maps.event.addListenerOnce(innerMap, 'tilesloaded', function () {
        // Get the controls div
        const controls = document.getElementById('control-panel');
        // Display controls once map is loaded.
        if (controls) {
            controls.style.display = 'block';
        }
    });
    // Add event listener to update the radius based on user selection.
    buttons.forEach((button) => {
        button.addEventListener('change', (event) => {
            const target = event.target;
            walkingCircle.setRadius(Number(target.value));
        });
    });
    // Handle user click, reset the map center and position the circle.
    innerMap.addListener('click', (mapsMouseEvent) => {
        const newCenter = mapsMouseEvent.latLng;
        walkingCircle.setCenter(newCenter);
        centerMarker.position = newCenter;
        innerMap.panTo(newCenter);
    });
    // Handle user dragging the circle, update the center marker position.
    walkingCircle.addListener('center_changed', () => {
        centerMarker.position = walkingCircle.getCenter();
    });
}
initMap();
index.js

CSS

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#control-panel {
  display: none; /* Set to 'display: block' after the map loads. */
  background-color: #fff;
  border: 2px solid #fff;
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  font-family: "Roboto", "sans-serif";
  font-size: medium;
  margin: 10px;
  padding: 10px;
}
style.css

HTML

<html>
    <head>
        <title>Circles</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <!-- prettier-ignore -->
        <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
    </head>
    <body>
        <gmp-map
            center="34.98956821576194, 135.74239981260283"
            zoom="15"
            map-id="DEMO_MAP_ID">
            <div id="control-panel" slot="control-inline-start-block-start">
                <input
                    id="short-walk"
                    type="radio"
                    name="radius"
                    value="400"
                    checked />
                <label for="short-walk">Short Walk (~5 minutes)</label><br />
                <input
                    id="medium-walk"
                    type="radio"
                    name="radius"
                    value="800" />
                <label for="medium-walk">Medium Walk (~15 minutes)</label><br />
                <input id="long-walk" type="radio" name="radius" value="1600" />
                <label for="long-walk">Long Walk (~30 minutes) </label>
            </div>
        </gmp-map>
    </body>
</html>
index.html
Xem ví dụ

Dùng thử đoạn nhạc

Xoá vòng kết nối

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

circle.setMap(null);

Xin lưu ý rằng phương thức trên không xoá vòng 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 đồ, rồi đặt chính vòng tròn đó thành null.

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

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

Những thay đổi mà người dùng thực hiện đối với đối tượng sẽ không được duy trì 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 nhiều đoạn, đa giác, hình tròn và hình chữ nhật) thành hình dạng mà người dùng có thể chỉnh sửa bằng cách đặt editable thành true trong các lựa 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ụ

Làm cho hình dạng có thể kéo

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

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

Trong một đường nhiều đoạn trắc địa, các đoạn của đường nhiều đoạn được vẽ là đườ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, thay vì đườ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à ô.

Bản đồ sau đây cho thấy 2 tam giác có kích thước và kích thước gần bằ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 khi quá trình chỉnh sửa hoàn tất. Những sự kiện này được liệt kê bên dưới.

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 mộ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 đường nhiều đoạ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 một hình chữ nhật: xem ví dụ.

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 sẽ được kích hoạt cho đường nhiều đoạn, đ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 nhiều lần 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.