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, đ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 chú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. Chiến lược phát hành đĩa đơn Lớp Polyline xác định lớp phủ tuyến tính của đườ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 loạt phân khúc dòng kết nối các vị trí đó theo một trình tự theo 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 LatLng toạ độ của đường thẳng và một tập hợp các kiểu để điều chỉnh hình nhiều đường hành vi thị giá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 dòng bên 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ủa định dạng "#FFFFFF". Lớp Polyline không hỗ trợ màu được đặt tên.
  • strokeOpacity chỉ định một giá trị số trong khoảng 0.0 và 1.0 để xác định độ mờ của đường thẳng . 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. 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 thành cho phép người dùng phải 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ụ

Dùng thử 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 đây: 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 trên bản đồ. Thay vào đó, nếu bạn muốn xoá hình nhiều đường, bạn nên xoá quy tắc này khỏi bản đồ, sau đó đặt 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 Đố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(). Thao tá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ị cụ thể giá trị chỉ mục từ 0.
  • insertAt() chèn một LatLng đã qua tại giá trị chỉ mục từ 0 cho trước. Xin lưu ý rằng bất kỳ toạ độ hiện tại tại giá trị chỉ mục đó sẽ được chuyển lên trên.
  • removeAt() xoá LatLng tại một điểm cụ thể giá trị chỉ mục 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ụ

Dùng 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 ký hiệu. Có tổ hợp các ký hiệu và lớp PolylineOptions, bạn có nhiều quyền kiểm soát giao diện của hình nhiều đường trên bản đồ của mình. Xem phần Biểu tượng để biết thông tin giới thiệu về mũi tên, đường đứt nét, biểu tượng tuỳ chỉnh và biểu tượng động.

Đa giác

Một đa giác biểu thị một vùng bao quanh bởi một đường dẫn (hoặc vòng lặp) khép kín, được xác định bởi một chuỗi toạ độ. Các đối tượng Polygon tương tự như đối tượng Polyline vì chúng bao gồm một chuỗi toạ độ theo một trình tự được sắp xếp theo 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 tuỳ chỉnh, trọng số và độ mờ cho cạnh của đa giác (nét vẽ) và độ đậm nhạt màu và độ mờ cho vùng kín (màu nền). Màu sắc phải là được biểu thị bằng đị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 xử lý đa giác quanh co, giúp bạn để vẽ đa giác có lỗ trống. Xem tài liệu cho 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, Chỉ định thuộc tính paths của đối tượng Polygon một mảng mảng, mỗi mảng thuộc loại MVCArray. Mỗi mảng xác định một trình tự riêng biệt của toạ độ LatLng được sắp xếp theo thứ tự.

Đối với đ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 duy nhất Toạ độ LatLng. API JavaScript của Maps sẽ chuyển đổi mảng đơn giản vào một mảng các mảng khi tạo khi lưu trữ mảng đó trong thuộc tính paths. API này cung cấp Phương thức getPath() cho các đa giác có 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 hay không hình dạ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ụ

Dùng thử mẫu

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

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

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 đây: 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 trên bản đồ. Thay vào đó, nếu bạn muốn xoá đa giác, bạn nên xoá quy tắc này khỏi bản đồ, sau đó đặt 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 mảng, trong đó mỗi mảng thuộc loại MVCArray. Một "lá" mảng 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 Phương thức getPaths() của đối tượng Polygon. Vì là một MVCArray mà bạn sẽ cần thao tác và hãy kiểm tra bằng các thao tác sau:

  • getAt() trả về LatLng tại một giá trị cụ thể giá trị chỉ mục từ 0.
  • insertAt() chèn một LatLng đã qua tại giá trị chỉ mục từ 0 cho trước. Xin lưu ý rằng bất kỳ toạ độ hiện tại tại giá trị chỉ mục đó sẽ được chuyển lên trên.
  • removeAt() xoá LatLng tại một điểm cụ thể giá trị chỉ mục 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ụ

Dùng thử mẫu

Đặt một lỗ trong hình đa giác

Để tạo vùng trống trong đa giác, bạn cần tạo hai đường dẫn, một bên trong. Để tạo lỗ, các toạ độ xác định phần bên trong đường dẫn phải theo thứ tự ngược với các đường dẫn xác định đường dẫn bên ngoài. Ví dụ: nếu toạ độ của đường dẫn bên ngoài theo thứ tự 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 đườ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 cho 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 vết thương 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ử mẫu

Các hình chữ nhật

Ngoài lớp Polygon chung, Google Maps JavaScript API bao gồm một lớp cụ thể cho Rectangle để đơn giản hoá cấu trúc của chúng.

Thêm hình chữ nhật

Rectangle tương tự như Polygon ở mà 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ẽ) và màu sắc và độ mờ tuỳ chỉnh cho vùng bên trong hình chữ nhật (màu nền). Màu sắc phải được biểu thị bằng HTML số thập lục phân phong cách.

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ó 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 này chỉ định liệu người dùng có thể chỉnh sửa hình dạng. Xem phần người dùng có thể chỉnh sửa hình dạng bên dưới. Tương tự, bạn có thể đặt thuộc tính draggable để cho phép người dùng kéo hình chữ nhật.

TypeScript

// This example adds a red rectangle to a map.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 11,
      center: { lat: 33.678, lng: -116.243 },
      mapTypeId: "terrain",
    }
  );

  const rectangle = new google.maps.Rectangle({
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
    map,
    bounds: {
      north: 33.685,
      south: 33.671,
      east: -116.234,
      west: -116.251,
    },
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

// This example adds a red rectangle to a map.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 11,
    center: { lat: 33.678, lng: -116.243 },
    mapTypeId: "terrain",
  });
  const rectangle = new google.maps.Rectangle({
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
    map,
    bounds: {
      north: 33.685,
      south: 33.671,
      east: -116.234,
      west: -116.251,
    },
  });
}

window.initMap = initMap;
index.js
Xem ví dụ

Dùng thử 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ụ

Dùng thử mẫu

Xoá hình chữ nhật

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

rectangle.setMap(null);

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 trên bản đồ. Thay vào đó, nếu bạn muốn xoá hình chữ nhật, bạn nên xoá quy tắc này khỏi bản đồ, sau đó đặt hình chữ nhật thành null.

Vòng tròn

Ngoài lớp Polygon chung, Google Maps JavaScript API bao gồm một lớp cụ thể cho Circle để đơn giản hoá cấu trúc của chú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ẽ) và màu sắc và độ mờ tuỳ chỉnh cho vùng bên trong vòng tròn ( lấp đầy). 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 vòng tròn sẽ có thêm 2 các thuộc tính xác định hình dạng của nó:

  • center chỉ định google.maps.LatLng 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 vòng kết nối chỉ định liệu người dùng có thể chỉnh sửa hay không hình dạ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 thành cho phép người dùng kéo vòng kết nối.

TypeScript

// This example creates circles on the map, representing populations in North
// America.

// First, create an object containing LatLng and population for each city.

interface City {
  center: google.maps.LatLngLiteral;
  population: number;
}

const citymap: Record<string, City> = {
  chicago: {
    center: { lat: 41.878, lng: -87.629 },
    population: 2714856,
  },
  newyork: {
    center: { lat: 40.714, lng: -74.005 },
    population: 8405837,
  },
  losangeles: {
    center: { lat: 34.052, lng: -118.243 },
    population: 3857799,
  },
  vancouver: {
    center: { lat: 49.25, lng: -123.1 },
    population: 603502,
  },
};

function initMap(): void {
  // Create the map.
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: 37.09, lng: -95.712 },
      mapTypeId: "terrain",
    }
  );

  // Construct the circle for each value in citymap.
  // Note: We scale the area of the circle based on the population.
  for (const city in citymap) {
    // Add the circle for this city to the map.
    const cityCircle = new google.maps.Circle({
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map,
      center: citymap[city].center,
      radius: Math.sqrt(citymap[city].population) * 100,
    });
  }
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
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ụ

Dùng thử mẫu

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

Để xóa 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 trên bản đồ. Thay vào đó, nếu bạn muốn xóa vòng kết nối, bạn nên xoá quy tắc này khỏi bản đồ, sau đó đặt tự vòng tròn vào 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 đó và 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 được để mọi người có thể di chuyển nó đế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 bạn muốn lưu các chỉnh sửa của người dùng, bạn phải nắm bắt và lưu trữ thông tin chính bạn.

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

Bạn có thể đặt hình dạng bất kỳ (hình nhiều đường, đa giác, hình tròn và hình chữ nhật) dưới dạng người dùng có thể chỉnh sửa, bằng cách đặt editable thành true trong các tuỳ chọn cho 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 đồ, đặt draggable đến true trong các tuỳ chọn hình dạng.

var redCoords = [
  {lat: 25.774, lng: -80.190},
  {lat: 18.466, lng: -66.118},
  {lat: 32.321, lng: -64.757}
];

// Construct a draggable red triangle with geodesic set to true.
new google.maps.Polygon({
  map: map,
  paths: redCoords,
  strokeColor: '#FF0000',
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: '#FF0000',
  fillOpacity: 0.35,
  draggable: true,
  geodesic: true
});

Khi bật tính năng kéo trên đa giác hoặc hình nhiều đường, bạn cũng nên cân nhắc tạo đa giác hoặc hình nhiều đường trắc địa bằng cách đặt geodesic vào true.

Đa giác trắc địa sẽ giữ nguyên hình dạng địa lý thực khi di chuyển, làm cho đa giác bị méo khi nó di chuyển về phía bắc hoặc nam trong Phép chiếu Mercator. Đa giác phi địa hình sẽ luôn giữ nguyên tên ban đầu 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 đi ngắn nhất giữa hai điểm trên bề mặt Trái Đất, giả sử Trái Đất là một hình cầu, trái ngược với các đường thẳng trên phép chiếu Mercator.

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

Bản đồ sau đây hiển thị hai hình tam giác có cùng kích thước và thứ nguyên. 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. Các các sự kiện đượ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

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

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

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 quá trình kéo cũng như trong khi kéo. Các 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 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.