Điểm đánh dấu (Cũ)

Chọn nền tảng: Android iOS JavaScript

Giới thiệu

Điểm đánh dấu xác định một vị trí trên bản đồ. Theo mặc định, điểm đánh dấu sử dụng hình ảnh tiêu chuẩn. Điểm đánh dấu có thể hiển thị hình ảnh tuỳ chỉnh, trong trường hợp này, chúng thường được gọi là "biểu tượng". Điểm đánh dấu và biểu tượng là các đối tượng thuộc loại Marker. Bạn có thể đặt biểu tượng tuỳ chỉnh trong hàm khởi tạo của điểm đánh dấu hoặc bằng cách gọi setIcon() trên điểm đánh dấu. Xem thêm về cách tuỳ chỉnh hình ảnh điểm đánh dấu.

Nói chung, điểm đánh dấu là một loại lớp phủ. Để biết thông tin về các loại lớp phủ khác, hãy xem phần Vẽ trên bản đồ.

Điểm đánh dấu được thiết kế để có thể tương tác. Ví dụ: theo mặc định, các thành phần này nhận sự kiện 'click', vì vậy, bạn có thể thêm trình nghe sự kiện để hiển thị một cửa sổ thông tin hiển thị thông tin tuỳ chỉnh. Bạn có thể cho phép người dùng di chuyển điểm đánh dấu trên bản đồ bằng cách đặt thuộc tính draggable của điểm đánh dấu thành true. Để biết thêm thông tin về điểm đánh dấu có thể kéo, hãy xem phần dưới đây.

Thêm một điểm đánh dấu

Hàm khởi tạo google.maps.Marker nhận một giá trị cố định là đối tượng Marker options, chỉ định các thuộc tính ban đầu của điểm đánh dấu.

Các trường sau đây đặc biệt quan trọng và thường được đặt khi tạo điểm đánh dấu:

  • position (bắt buộc) chỉ định một LatLng xác định vị trí ban đầu của điểm đánh dấu. Một cách để truy xuất LatLng là sử dụng Dịch vụ mã hoá địa lý.
  • map (không bắt buộc) chỉ định Map để đặt điểm đánh dấu. Nếu bạn không chỉ định bản đồ khi tạo điểm đánh dấu, thì điểm đánh dấu sẽ được tạo nhưng không được đính kèm vào (hoặc hiển thị trên) bản đồ. Bạn có thể thêm điểm đánh dấu sau bằng cách gọi phương thức setMap() của điểm đánh dấu.

Ví dụ sau đây thêm một điểm đánh dấu đơn giản vào bản đồ tại Uluru, ở trung tâm Úc:

TypeScript

function initMap(): void {
  const myLatLng = { lat: -25.363, lng: 131.044 };

  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: myLatLng,
    }
  );

  new google.maps.Marker({
    position: myLatLng,
    map,
    title: "Hello World!",
  });
}

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

JavaScript

function initMap() {
  const myLatLng = { lat: -25.363, lng: 131.044 };
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: myLatLng,
  });

  new google.maps.Marker({
    position: myLatLng,
    map,
    title: "Hello World!",
  });
}

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

Thử mẫu

Trong ví dụ trên, điểm đánh dấu được đặt trên bản đồ khi tạo điểm đánh dấu bằng cách sử dụng thuộc tính map trong các tuỳ chọn điểm đánh dấu. Ngoài ra, bạn có thể thêm điểm đánh dấu vào bản đồ trực tiếp bằng cách sử dụng phương thức setMap() của điểm đánh dấu, như trong ví dụ dưới đây: 

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
  zoom: 4,
  center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);

var marker = new google.maps.Marker({
    position: myLatlng,
    title:"Hello World!"
});

// To add the marker to the map, call setMap();
marker.setMap(map);

title của điểm đánh dấu sẽ xuất hiện dưới dạng chú giải công cụ.

Nếu bạn không muốn truyền bất kỳ Marker options nào trong hàm khởi tạo của điểm đánh dấu, hãy truyền một đối tượng trống {} trong đối số cuối cùng của hàm khởi tạo.

Xem ví dụ

Xoá điểm đánh dấu

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

marker.setMap(null);

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

Nếu muốn quản lý một tập hợp điểm đánh dấu, bạn nên tạo một mảng để lưu trữ các điểm đánh dấu đó. Khi sử dụng mảng này, bạn có thể lần lượt gọi setMap() trên từng điểm đánh dấu trong mảng khi cần xoá các điểm đánh dấu đó. Bạn có thể xoá các điểm đánh dấu bằng cách xoá chúng khỏi bản đồ, sau đó đặt length của mảng thành 0. Thao tác này sẽ xoá tất cả các tệp tham chiếu đến các điểm đánh dấu.

Xem ví dụ

Tuỳ chỉnh hình ảnh điểm đánh dấu

Bạn có thể tuỳ chỉnh giao diện của điểm đánh dấu bằng cách chỉ định tệp hình ảnh hoặc biểu tượng dựa trên vectơ để hiển thị thay vì biểu tượng ghim mặc định của Google Maps. Bạn có thể thêm văn bản bằng nhãn điểm đánh dấu và sử dụng các biểu tượng phức tạp để xác định các vùng có thể nhấp và đặt thứ tự ngăn xếp của các điểm đánh dấu.

Điểm đánh dấu có biểu tượng hình ảnh

Trong trường hợp cơ bản nhất, một biểu tượng có thể chỉ định một hình ảnh để sử dụng thay vì biểu tượng ghim mặc định của Google Maps. Để chỉ định một biểu tượng như vậy, hãy đặt thuộc tính icon của điểm đánh dấu thành URL của hình ảnh. Maps JavaScript API sẽ tự động định cỡ biểu tượng.

TypeScript

// This example adds a marker to indicate the position of Bondi Beach in Sydney,
// Australia.
function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -33, lng: 151 },
    }
  );

  const image =
    "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png";
  const beachMarker = new google.maps.Marker({
    position: { lat: -33.89, lng: 151.274 },
    map,
    icon: image,
  });
}

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

JavaScript

// This example adds a marker to indicate the position of Bondi Beach in Sydney,
// Australia.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -33, lng: 151 },
  });
  const image =
    "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png";
  const beachMarker = new google.maps.Marker({
    position: { lat: -33.89, lng: 151.274 },
    map,
    icon: image,
  });
}

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

Thử mẫu

Điểm đánh dấu có biểu tượng dựa trên vectơ

Bạn có thể sử dụng đường dẫn vectơ SVG tuỳ chỉnh để xác định giao diện của các điểm đánh dấu. Để thực hiện việc này, hãy truyền một đối tượng Symbol cố định có đường dẫn mong muốn đến thuộc tính icon của điểm đánh dấu. Bạn có thể xác định một đường dẫn tuỳ chỉnh bằng cách sử dụng ký hiệu đường dẫn SVG hoặc sử dụng một trong các đường dẫn được xác định trước trong google.maps.SymbolPath. Bạn cần có thuộc tính anchor để điểm đánh dấu hiển thị chính xác khi mức thu phóng thay đổi. Tìm hiểu thêm về cách sử dụng Ký hiệu để tạo biểu tượng dựa trên vectơ cho điểm đánh dấu (và đa tuyến).

TypeScript

// This example uses SVG path notation to add a vector-based symbol
// as the icon for a marker. The resulting icon is a marker-shaped
// symbol with a blue fill and no border.

function initMap(): void {
  const center = new google.maps.LatLng(-33.712451, 150.311823);
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 9,
      center: center,
    }
  );

  const svgMarker = {
    path: "M-1.547 12l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM0 0q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z",
    fillColor: "blue",
    fillOpacity: 0.6,
    strokeWeight: 0,
    rotation: 0,
    scale: 2,
    anchor: new google.maps.Point(0, 20),
  };

  new google.maps.Marker({
    position: map.getCenter(),
    icon: svgMarker,
    map: map,
  });
}

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

JavaScript

// This example uses SVG path notation to add a vector-based symbol
// as the icon for a marker. The resulting icon is a marker-shaped
// symbol with a blue fill and no border.
function initMap() {
  const center = new google.maps.LatLng(-33.712451, 150.311823);
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 9,
    center: center,
  });
  const svgMarker = {
    path: "M-1.547 12l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM0 0q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z",
    fillColor: "blue",
    fillOpacity: 0.6,
    strokeWeight: 0,
    rotation: 0,
    scale: 2,
    anchor: new google.maps.Point(0, 20),
  };

  new google.maps.Marker({
    position: map.getCenter(),
    icon: svgMarker,
    map: map,
  });
}

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

Thử mẫu

Nhãn điểm đánh dấu

Nhãn điểm đánh dấu là một chữ cái hoặc số xuất hiện bên trong điểm đánh dấu. Hình ảnh điểm đánh dấu trong phần này hiển thị nhãn điểm đánh dấu có chữ cái "B". Bạn có thể chỉ định nhãn điểm đánh dấu dưới dạng một chuỗi hoặc đối tượng MarkerLabel bao gồm một chuỗi và các thuộc tính nhãn khác.

Khi tạo điểm đánh dấu, bạn có thể chỉ định thuộc tính label trong đối tượng MarkerOptions. Ngoài ra, bạn có thể gọi setLabel() trên đối tượng Marker (Điểm đánh dấu) để đặt nhãn trên một điểm đánh dấu hiện có.

Ví dụ sau đây hiển thị các điểm đánh dấu được gắn nhãn khi người dùng nhấp vào bản đồ:

TypeScript

// In the following example, markers appear when the user clicks on the map.
// Each marker is labeled with a single alphabetical character.
const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let labelIndex = 0;

function initMap(): void {
  const bangalore = { lat: 12.97, lng: 77.59 };
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 12,
      center: bangalore,
    }
  );

  // This event listener calls addMarker() when the map is clicked.
  google.maps.event.addListener(map, "click", (event) => {
    addMarker(event.latLng, map);
  });

  // Add a marker at the center of the map.
  addMarker(bangalore, map);
}

// Adds a marker to the map.
function addMarker(location: google.maps.LatLngLiteral, map: google.maps.Map) {
  // Add the marker at the clicked location, and add the next-available label
  // from the array of alphabetical characters.
  new google.maps.Marker({
    position: location,
    label: labels[labelIndex++ % labels.length],
    map: map,
  });
}

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

JavaScript

// In the following example, markers appear when the user clicks on the map.
// Each marker is labeled with a single alphabetical character.
const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let labelIndex = 0;

function initMap() {
  const bangalore = { lat: 12.97, lng: 77.59 };
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: bangalore,
  });

  // This event listener calls addMarker() when the map is clicked.
  google.maps.event.addListener(map, "click", (event) => {
    addMarker(event.latLng, map);
  });
  // Add a marker at the center of the map.
  addMarker(bangalore, map);
}

// Adds a marker to the map.
function addMarker(location, map) {
  // Add the marker at the clicked location, and add the next-available label
  // from the array of alphabetical characters.
  new google.maps.Marker({
    position: location,
    label: labels[labelIndex++ % labels.length],
    map: map,
  });
}

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

Thử mẫu

Biểu tượng phức tạp

Bạn có thể chỉ định các hình dạng phức tạp để cho biết các vùng có thể nhấp và chỉ định cách biểu tượng xuất hiện so với các lớp phủ khác ("thứ tự ngăn xếp" của chúng). Các biểu tượng được chỉ định theo cách này phải đặt thuộc tính icon thành một đối tượng thuộc loại Icon.

Các đối tượng Icon xác định một hình ảnh. Các thuộc tính này cũng xác định size của biểu tượng, origin của biểu tượng (ví dụ: nếu hình ảnh bạn muốn là một phần của hình ảnh lớn hơn trong một sprite) và anchor nơi đặt điểm phát sáng của biểu tượng (dựa trên nguồn gốc).

Nếu đang sử dụng nhãn có điểm đánh dấu tuỳ chỉnh, bạn có thể định vị nhãn bằng thuộc tính labelOrigin trong đối tượng Icon.

TypeScript

// The following example creates complex markers to indicate beaches near
// Sydney, NSW, Australia. Note that the anchor is set to (0,32) to correspond
// to the base of the flagpole.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 10,
      center: { lat: -33.9, lng: 151.2 },
    }
  );

  setMarkers(map);
}

// Data for the markers consisting of a name, a LatLng and a zIndex for the
// order in which these markers should display on top of each other.
const beaches: [string, number, number, number][] = [
  ["Bondi Beach", -33.890542, 151.274856, 4],
  ["Coogee Beach", -33.923036, 151.259052, 5],
  ["Cronulla Beach", -34.028249, 151.157507, 3],
  ["Manly Beach", -33.80010128657071, 151.28747820854187, 2],
  ["Maroubra Beach", -33.950198, 151.259302, 1],
];

function setMarkers(map: google.maps.Map) {
  // Adds markers to the map.

  // Marker sizes are expressed as a Size of X,Y where the origin of the image
  // (0,0) is located in the top left of the image.

  // Origins, anchor positions and coordinates of the marker increase in the X
  // direction to the right and in the Y direction down.
  const image = {
    url: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png",
    // This marker is 20 pixels wide by 32 pixels high.
    size: new google.maps.Size(20, 32),
    // The origin for this image is (0, 0).
    origin: new google.maps.Point(0, 0),
    // The anchor for this image is the base of the flagpole at (0, 32).
    anchor: new google.maps.Point(0, 32),
  };
  // Shapes define the clickable region of the icon. The type defines an HTML
  // <area> element 'poly' which traces out a polygon as a series of X,Y points.
  // The final coordinate closes the poly by connecting to the first coordinate.
  const shape = {
    coords: [1, 1, 1, 20, 18, 20, 18, 1],
    type: "poly",
  };

  for (let i = 0; i < beaches.length; i++) {
    const beach = beaches[i];

    new google.maps.Marker({
      position: { lat: beach[1], lng: beach[2] },
      map,
      icon: image,
      shape: shape,
      title: beach[0],
      zIndex: beach[3],
    });
  }
}

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

JavaScript

// The following example creates complex markers to indicate beaches near
// Sydney, NSW, Australia. Note that the anchor is set to (0,32) to correspond
// to the base of the flagpole.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 10,
    center: { lat: -33.9, lng: 151.2 },
  });

  setMarkers(map);
}

// Data for the markers consisting of a name, a LatLng and a zIndex for the
// order in which these markers should display on top of each other.
const beaches = [
  ["Bondi Beach", -33.890542, 151.274856, 4],
  ["Coogee Beach", -33.923036, 151.259052, 5],
  ["Cronulla Beach", -34.028249, 151.157507, 3],
  ["Manly Beach", -33.80010128657071, 151.28747820854187, 2],
  ["Maroubra Beach", -33.950198, 151.259302, 1],
];

function setMarkers(map) {
  // Adds markers to the map.
  // Marker sizes are expressed as a Size of X,Y where the origin of the image
  // (0,0) is located in the top left of the image.
  // Origins, anchor positions and coordinates of the marker increase in the X
  // direction to the right and in the Y direction down.
  const image = {
    url: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png",
    // This marker is 20 pixels wide by 32 pixels high.
    size: new google.maps.Size(20, 32),
    // The origin for this image is (0, 0).
    origin: new google.maps.Point(0, 0),
    // The anchor for this image is the base of the flagpole at (0, 32).
    anchor: new google.maps.Point(0, 32),
  };
  // Shapes define the clickable region of the icon. The type defines an HTML
  // <area> element 'poly' which traces out a polygon as a series of X,Y points.
  // The final coordinate closes the poly by connecting to the first coordinate.
  const shape = {
    coords: [1, 1, 1, 20, 18, 20, 18, 1],
    type: "poly",
  };

  for (let i = 0; i < beaches.length; i++) {
    const beach = beaches[i];

    new google.maps.Marker({
      position: { lat: beach[1], lng: beach[2] },
      map,
      icon: image,
      shape: shape,
      title: beach[0],
      zIndex: beach[3],
    });
  }
}

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

Thử mẫu

Chuyển đổi đối tượng MarkerImage thành loại Icon

Cho đến phiên bản 3.10 của API JavaScript của Maps, các biểu tượng phức tạp được xác định là đối tượng MarkerImage. Giá trị cố định đối tượng Icon được thêm vào phiên bản 3.10 và thay thế MarkerImage từ phiên bản 3.11 trở đi. Các giá trị cố định đối tượng Icon hỗ trợ các tham số giống như MarkerImage, cho phép bạn dễ dàng chuyển đổi MarkerImage thành Icon bằng cách xoá hàm khởi tạo, gói các tham số trước đó trong {} và thêm tên của từng tham số. Ví dụ: 

var image = new google.maps.MarkerImage(
    place.icon,
    new google.maps.Size(71, 71),
    new google.maps.Point(0, 0),
    new google.maps.Point(17, 34),
    new google.maps.Size(25, 25));

trở thành

var image = {
  url: place.icon,
  size: new google.maps.Size(71, 71),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(17, 34),
  scaledSize: new google.maps.Size(25, 25)
};

Đánh dấu Optimize

Tính năng tối ưu hoá giúp nâng cao hiệu suất bằng cách kết xuất nhiều điểm đánh dấu dưới dạng một phần tử tĩnh. Điều này hữu ích trong trường hợp cần có một số lượng lớn điểm đánh dấu. Theo mặc định, API JavaScript của Maps sẽ quyết định xem một điểm đánh dấu có được tối ưu hoá hay không. Khi có một số lượng lớn điểm đánh dấu, API JavaScript của Maps sẽ cố gắng kết xuất các điểm đánh dấu bằng tính năng tối ưu hoá. Không phải tất cả Điểm đánh dấu đều có thể được tối ưu hoá; trong một số trường hợp, API JavaScript của Maps có thể cần hiển thị Điểm đánh dấu mà không cần tối ưu hoá. Tắt tính năng kết xuất được tối ưu hoá cho ảnh GIF hoặc PNG động hoặc khi mỗi điểm đánh dấu phải được kết xuất dưới dạng một phần tử DOM riêng biệt. Ví dụ sau đây cho thấy cách tạo một điểm đánh dấu được tối ưu hoá: 

var marker = new google.maps.Marker({
    position: myLatlng,
    title:"Hello World!",
    optimized: true 
});

Cho phép truy cập vào điểm đánh dấu

Bạn có thể truy cập vào điểm đánh dấu bằng cách thêm sự kiện trình nghe lượt nhấp và đặt optimized thành false. Trình nghe lượt nhấp khiến điểm đánh dấu có ngữ nghĩa của nút. Bạn có thể truy cập vào điểm đánh dấu này bằng cách sử dụng thao tác điều hướng bằng bàn phím, trình đọc màn hình, v.v. Sử dụng tuỳ chọn title để hiển thị văn bản hỗ trợ tiếp cận cho một điểm đánh dấu.

Trong ví dụ sau, điểm đánh dấu đầu tiên sẽ nhận được tiêu điểm khi bạn nhấn phím Tab; sau đó, bạn có thể sử dụng các phím mũi tên để di chuyển giữa các điểm đánh dấu. Nhấn phím tab một lần nữa để tiếp tục di chuyển qua các nút điều khiển bản đồ còn lại. Nếu một điểm đánh dấu có cửa sổ thông tin, bạn có thể mở cửa sổ đó bằng cách nhấp vào điểm đánh dấu hoặc nhấn phím enter hoặc phím cách khi điểm đánh dấu được chọn. Khi cửa sổ thông tin đóng, tiêu điểm sẽ quay lại điểm đánh dấu được liên kết.

TypeScript

// The following example creates five accessible and
// focusable markers.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 12,
      center: { lat: 34.84555, lng: -111.8035 },
    }
  );

  // Set LatLng and title text for the markers. The first marker (Boynton Pass)
  // receives the initial focus when tab is pressed. Use arrow keys to
  // move between markers; press tab again to cycle through the map controls.
  const tourStops: [google.maps.LatLngLiteral, string][] = [
    [{ lat: 34.8791806, lng: -111.8265049 }, "Boynton Pass"],
    [{ lat: 34.8559195, lng: -111.7988186 }, "Airport Mesa"],
    [{ lat: 34.832149, lng: -111.7695277 }, "Chapel of the Holy Cross"],
    [{ lat: 34.823736, lng: -111.8001857 }, "Red Rock Crossing"],
    [{ lat: 34.800326, lng: -111.7665047 }, "Bell Rock"],
  ];

  // Create an info window to share between markers.
  const infoWindow = new google.maps.InfoWindow();

  // Create the markers.
  tourStops.forEach(([position, title], i) => {
    const marker = new google.maps.Marker({
      position,
      map,
      title: `${i + 1}. ${title}`,
      label: `${i + 1}`,
      optimized: false,
    });

    // Add a click listener for each marker, and set up the info window.
    marker.addListener("click", () => {
      infoWindow.close();
      infoWindow.setContent(marker.getTitle());
      infoWindow.open(marker.getMap(), marker);
    });
  });
}

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

JavaScript

// The following example creates five accessible and
// focusable markers.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: { lat: 34.84555, lng: -111.8035 },
  });
  // Set LatLng and title text for the markers. The first marker (Boynton Pass)
  // receives the initial focus when tab is pressed. Use arrow keys to
  // move between markers; press tab again to cycle through the map controls.
  const tourStops = [
    [{ lat: 34.8791806, lng: -111.8265049 }, "Boynton Pass"],
    [{ lat: 34.8559195, lng: -111.7988186 }, "Airport Mesa"],
    [{ lat: 34.832149, lng: -111.7695277 }, "Chapel of the Holy Cross"],
    [{ lat: 34.823736, lng: -111.8001857 }, "Red Rock Crossing"],
    [{ lat: 34.800326, lng: -111.7665047 }, "Bell Rock"],
  ];
  // Create an info window to share between markers.
  const infoWindow = new google.maps.InfoWindow();

  // Create the markers.
  tourStops.forEach(([position, title], i) => {
    const marker = new google.maps.Marker({
      position,
      map,
      title: `${i + 1}. ${title}`,
      label: `${i + 1}`,
      optimized: false,
    });

    // Add a click listener for each marker, and set up the info window.
    marker.addListener("click", () => {
      infoWindow.close();
      infoWindow.setContent(marker.getTitle());
      infoWindow.open(marker.getMap(), marker);
    });
  });
}

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

Thử mẫu

Tạo ảnh động cho điểm đánh dấu

Bạn có thể tạo ảnh động cho điểm đánh dấu để chúng thể hiện chuyển động linh hoạt trong nhiều trường hợp. Để chỉ định cách tạo ảnh động cho điểm đánh dấu, hãy sử dụng thuộc tính animation của điểm đánh dấu, thuộc loại google.maps.Animation. Các giá trị Animation sau đây được hỗ trợ:

  • DROP cho biết điểm đánh dấu sẽ rơi từ đầu bản đồ xuống vị trí cuối cùng khi được đặt lần đầu tiên trên bản đồ. Ảnh động sẽ ngừng khi điểm đánh dấu dừng lại và animation sẽ trở về null. Loại ảnh động này thường được chỉ định trong quá trình tạo Marker.
  • BOUNCE cho biết rằng điểm đánh dấu sẽ bật lên tại chỗ. Điểm đánh dấu lượt thoát sẽ tiếp tục thoát cho đến khi thuộc tính animation được đặt rõ ràng thành null.

Bạn có thể bắt đầu ảnh động trên một điểm đánh dấu hiện có bằng cách gọi setAnimation() trên đối tượng Marker.

TypeScript

// The following example creates a marker in Stockholm, Sweden using a DROP
// animation. Clicking on the marker will toggle the animation between a BOUNCE
// animation and no animation.

let marker: google.maps.Marker;

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 13,
      center: { lat: 59.325, lng: 18.07 },
    }
  );

  marker = new google.maps.Marker({
    map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: { lat: 59.327, lng: 18.067 },
  });
  marker.addListener("click", toggleBounce);
}

function toggleBounce() {
  if (marker.getAnimation() !== null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}

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

JavaScript

// The following example creates a marker in Stockholm, Sweden using a DROP
// animation. Clicking on the marker will toggle the animation between a BOUNCE
// animation and no animation.
let marker;

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 13,
    center: { lat: 59.325, lng: 18.07 },
  });

  marker = new google.maps.Marker({
    map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: { lat: 59.327, lng: 18.067 },
  });
  marker.addListener("click", toggleBounce);
}

function toggleBounce() {
  if (marker.getAnimation() !== null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}

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

Thử mẫu

Nếu có nhiều điểm đánh dấu, bạn không nên thả tất cả các điểm đánh dấu đó trên bản đồ cùng một lúc. Bạn có thể sử dụng setTimeout() để tạo khoảng cách cho ảnh động của điểm đánh dấu bằng cách sử dụng mẫu như minh hoạ bên dưới: 

function drop() {
  for (var i =0; i < markerArray.length; i++) {
    setTimeout(function() {
      addMarkerMethod();
    }, i * 200);
  }
}

Xem ví dụ

Tạo điểm đánh dấu có thể kéo

Để cho phép người dùng kéo điểm đánh dấu đến một vị trí khác trên bản đồ, hãy đặt draggable thành true trong các tuỳ chọn điểm đánh dấu. 

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
  zoom: 4,
  center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);

// Place a draggable marker on the map
var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    draggable:true,
    title:"Drag me!"
});

Tuỳ chỉnh điểm đánh dấu khác

Để biết điểm đánh dấu được tuỳ chỉnh đầy đủ, hãy xem ví dụ về cửa sổ bật lên được tuỳ chỉnh.

Để biết thêm về các tiện ích mở rộng của lớp Marker, tính năng quản lý và cụm điểm đánh dấu cũng như tuỳ chỉnh lớp phủ, hãy xem thư viện nguồn mở.