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 khác nhau vào bản đồ của mình. Hình dạng là một đối tượng trên bản đồ, gắn với một toạ độ vĩ độ/kinh độ. Có 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 hình dạng để người dùng có thể chỉnh sửa hoặc kéo hình dạng đó.

Hình nhiều đường

Để vẽ một đường trên bản đồ của bạn, hãy sử dụng hình nhiều đường. Lớp Polyline xác định một 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 các vị trí LatLng và tạo một loạt các phân đoạn dòng kết nối những vị trí đó theo trình 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 thẳng và một tập hợp các kiểu để điều chỉnh hành vi hình ảnh 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 sắc, trọng số và độ mờ tuỳ chỉnh cho nét vẽ của dò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. Hình nhiều đường hỗ trợ các kiểu nét sau:

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

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

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ử dùng mẫu

Xoá 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à một đối tượng nhiều đường:

flightPath.setMap(null);

Lưu ý rằng phương thức trên không xoá hình nhiều đường. Thao tá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 phải xoá hình đó khỏi bản đồ rồi đặ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 dẫn của đường đó. Để truy xuất toạ độ, hãy gọi getPath() để trả về một mảng thuộc loại MVCArray. Bạn có thể thao tác và kiểm tra mảng bằng các thao tác sau:

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

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

Đa giác

Đa giác biểu thị một khu vực bao quanh bởi một đường dẫn (hoặc vòng lặp) khép kín đượ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ỗ các đối tượng này bao gồm một chuỗi các toạ độ theo một trình tự có thứ tự. Đa giác được vẽ bằng một 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ư các màu sắc và độ mờ tuỳ chỉnh cho vùng kín (màu nền). 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.

Đố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.
  • Vùng có lỗ.
  • Giao lộ 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ẽ sử 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. Công cụ này giúp bạn xử lý việc uốn đa giác, giúp bạn dễ dàng vẽ đ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 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 loại 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 được sắp xếp theo thứ tự.

Đối với các đa giác đơn giản chỉ chứa một đường dẫn, bạn có thể tạo Polygon bằng cách sử dụng một mảng gồm các toạ độ LatLng. API JavaScript của Maps sẽ chuyển đổi một mảng đơn giản thành một mảng các mảng trong quá trình tạo khi 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 có một đường dẫn.

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

Thử dùng mẫu

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

Polygon trong ví dụ trên bao gồm 4 tập hợp toạ độ LatLng, nhưng hãy lưu ý rằng tập hợp toạ độ đầ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 khu vực đóng, nên bạn không cần chỉ định bộ toạ độ cuối cùng. API JavaScript của Maps sẽ tự động hoàn thành đa giác bằng cách vẽ một nét kết nối vị trí cuối cùng trở lại vị trí đầu tiên cho một đường dẫn nhất định bất kỳ.

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

Xoá đa giác

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

bermudaTriangle.setMap(null);

Lưu ý rằng phương pháp trên không xoá đa giác. Thao tác này sẽ xoá đa giác khỏi bản đồ. Thay vào đó, nếu bạn muốn xoá đa giác, bạn phải xoá nó khỏi bản đồ và 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 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 những 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 này bằng các thao tác sau:

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

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ử dùng mẫu

Đặt một lỗ trong hình đ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 nằm bên trong. Để 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 các toạ độ của đường dẫn ngoài theo thứ tự 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 sẽ giúp bạn xử lý thứ tự của các đường dẫn bên trong và bên ngoài, giúp bạn dễ dàng vẽ đa giác có lỗ hổng. 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, với đường dẫn bên trong xoay 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ụ

Thử dùng 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á quá trình xây dựng các đố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, trọng số và độ mờ tuỳ chỉnh cho cạnh của hình chữ nhật (nét nét) cũng như màu sắc và độ mờ tuỳ chỉnh cho khu vực bên 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 đó, một hình chữ nhật có thuộc tính bounds xác định hình dạng của nó bằng cách chỉ định google.maps.LatLngBounds cho hình chữ nhật đó.

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

Thử dùng mẫu

Đoạn 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;
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ử dùng 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);

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 đồ. Thay vào đó, 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á quá trình 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, 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 sắc và độ mờ tuỳ chỉnh cho vùng bên trong vòng tròn (màu tô). Màu phải được biểu thị bằng 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 hình tròn có thêm hai 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 vòng tròn.
  • radius chỉ định bán kính của hình tròn, tính bằng mét.

Thuộc tính editable của vòng kết nối sẽ chỉ định liệu người dùng có thể chỉnh sửa hình dạng hay không. Xem 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;
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ử dùng 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 tròn, bạn nên xóa vòng kết nối đó khỏi bản đồ, 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

Việc làm cho 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 mà mọi người có thể sử dụng để đặt lại vị trí, đổ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ể làm cho 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 mọi hình dạng (hình nhiều đường, đa giác, hình tròn và hình chữ nhật) thành 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ụ

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

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

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

Trong hình nhiều đường trắc địa, các đoạn của hình nhiều đường được vẽ dưới dạng đường 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ề bản đồ và toạ độ ô.

Bản đồ sau đây hiển thị 2 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 nó 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 chỉnh sửa hình dạng, sự kiện sẽ được kích hoạt sau khi hoàn tất chỉnh sửa. Những sự kiện này được liệt kê dưới đây.

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

Trình nghe phải được đặt trên đường dẫn của đa giác. Nếu đa giác có nhiều đường dẫn, 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 này 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.');
});

Hãy 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ụ.

Nghe các sự kiện kéo

Khi bạn kéo một hình dạng, các sự kiện sẽ được kích hoạt khi bắt đầu và kết thúc hành động kéo cũng như trong khi kéo. Những sự kiện sau được kích hoạt cho hình nhiều đường, đ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 nhiều lần 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.