Trang này được dịch bởi Cloud Translation API.

Đánh dấu

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

Giới thiệu

Điểm đánh dấu xác định vị trí trên bản đồ. Theo mặc định, một điểm đánh dấu sử dụng hình ảnh chuẩn. Điểm đánh dấu có thể hiển thị hình ảnh tùy chỉnh. Trong trường hợp đó, hình ảnh thường được gọi là "biểu tượng". Điểm đánh dấu và biểu tượng là các loại đối tượng 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 gọi setIcon() trên điểm đánh dấu. Hãy xem thêm về cách tuỳ chỉnh hình ảnh của đ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 nội dung Vẽ trên bản đồ.

Điểm đánh dấu được thiết kế để có tính tương tác. Ví dụ: theo mặc định, các sự kiện này nhận được các sự kiện 'click' để bạn có thể thêm trình nghe sự kiện để hiển thị 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 một đ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 bên dưới.

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

Hàm khởi tạo google.maps.Marker lấy một đối tượng Marker options duy nhất, 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 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 đồ để xây dựng điểm đánh dấu, thì điểm đánh dấu đó sẽ được tạo nhưng không được đính kèm trên (hoặc được hiển thị trên) bản đồ. Bạn có thể thêm điểm đánh dấu sau này bằng cách gọi phương thức setMap() của điểm đánh dấu.

Ví dụ sau đây sẽ thêm một điểm đánh dấu đơn giản vào bản đồ tại Uluru, trung tâm của Ú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

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

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

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

The marker's title will appear as a tooltip.

If you do not wish to pass any Marker options in the marker's constructor, instead pass an empty object {} in the last argument of the constructor.

View example

Remove a marker

To remove a marker from the map, call the setMap() method passing null as the argument.

marker.setMap(null);

Note that the above method does not delete the marker. It removes the marker from the map. If instead you wish to delete the marker, you should remove it from the map, and then set the marker itself to null.

If you wish to manage a set of markers, you should create an array to hold the markers. Using this array, you can then call setMap() on each marker in the array in turn when you need to remove the markers. You can delete the markers by removing them from the map and then setting the array's length to 0, which removes all references to the markers.

View example

Customize a marker image

You can customize the visual appearance of markers by specifying an image file or vector-based icon to display instead of the default Google Maps pushpin icon. You can add text with a marker label, and use complex icons to define clickable regions, and set the stack order of markers.

Markers with image icons

In the most basic case, an icon can specify an image to use instead of the default Google Maps pushpin icon. To specify such an icon, set the marker's icon property to the URL of an image. The Maps JavaScript API will size the icon automatically.

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

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

Đ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 hình ảnh của các điểm đánh dấu. Để thực hiện việc này, hãy chuyển giá trị cố định Symbol của đối tượng bằng đườ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 tùy 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. Thuộc tính anchor là bắt buộc để đ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 các điểm đánh dấu (và nhiều đường).

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

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

Nhãn đá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 một điểm đánh dấu. Hình ảnh điểm đánh dấu trong phần này cho thấy một nhãn đánh dấu có chữ 'B' trên đó. Bạn có thể chỉ định nhãn đánh dấu là một chuỗi hoặc đối tượng MarkerLabel bao gồm chuỗi và các thuộc tính nhãn khác.

Khi tạo một đ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 Điểm đánh dấu để đặt nhãn trên một điểm đánh dấu hiện có.

Ví dụ sau đây cho thấy các điểm đánh dấu có 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

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

Các biểu tượng phức tạp

Bạn có thể chỉ định các hình dạng phức tạp để biểu thị các khu vực có thể nhấp vào, và chỉ định cách các 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ác biểu tượng được chỉ định theo cách này phải đặt các thuộc tính icon thành đối tượng thuộc loại Icon.

Đối tượng Icon xác định hình ảnh. Chúng 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 nằm trong một hình ảnh lớn hơn trong sprite) và anchor nơi đặt điểm phát sóng của biểu tượng (dựa trên điểm gốc).

Nếu đang sử dụng một nhãn với một đ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

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

Đang chuyển đổi đối tượng `MarkerImage` thành loại `Icon`

Cho đến phiên bản 3.10 của API Maps JavaScript, 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. Giá trị cố định đối tượng Icon hỗ trợ các tham số tương tự như MarkerImage, cho phép bạn dễ dàng chuyển đổi MarkerImage thành Icon bằng cách xóa hàm khởi tạo, gói các tham số trước đó trong {} và thêm tên của mỗi 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));

becomes

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)
};

Optimize markers

Optimization enhances performance by rendering many markers as a single static element. This is useful in cases where a large number of markers is required. By default, the Maps JavaScript API will decide whether a marker will be optimized. When there is a large number of markers, the Maps JavaScript API will attempt to render markers with optimization. Not all Markers can be optimized; in some situations, the Maps JavaScript API may need to render Markers without optimization. Disable optimized rendering for animated GIFs or PNGs, or when each marker must be rendered as a separate DOM element. The following example shows creating an optimized marker:

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

Đặt điểm đánh dấu ở chế độ có thể truy cập được

Bạn có thể làm cho một điểm đánh dấu có thể truy cập được bằng cách thêm một 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 thông tin này bằng cách sử dụng tính năng điều hướng bằng bàn phím, trình đọc màn hình, v.v. Sử dụng tùy chọn title để trình bày văn bản có thể truy cập được cho một điểm đánh dấu.

Trong ví dụ sau, điểm đánh dấu đầu tiên nhận được tiêu điểm khi 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 lần nữa để tiếp tục di chuyển qua các nút điều khiển còn lại trên bản đồ. Nếu đ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 chọn điểm đánh dấu. Khi cửa sổ thông tin đóng lại, 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

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

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

Bạn có thể tạo ảnh động cho điểm đánh dấu để biểu thị chuyển động động trong nhiều trường hợp. Để chỉ định cách tạo điểm ả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ó thể có những giá trị Animation sau đây:

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

Bạn có thể bắt đầu một ả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

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

Nếu có nhiều điểm đánh dấu, bạn có thể không muố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 trống cho ảnh động của điểm đánh dấu bằng cách sử dụng mẫu như minh họa dưới đây:

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

Xem ví dụ

Làm cho một đ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 tùy 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!"
});

Tùy chỉnh trình đánh dấu thêm

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

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

Đánh dấu

Giới thiệu

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

TypeScript

JavaScript

Thử mẫu

Remove a marker

Customize a marker image

Markers with image icons

TypeScript

JavaScript

Thử mẫu

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

TypeScript

JavaScript

Thử mẫu

Nhãn đánh dấu

TypeScript

JavaScript

Thử mẫu

Các biểu tượng phức tạp

TypeScript

JavaScript

Thử mẫu

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

Optimize markers

Đặt điểm đánh dấu ở chế độ có thể truy cập được

TypeScript

JavaScript

Thử mẫu

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

TypeScript

JavaScript

Thử mẫu

Làm cho một điểm đánh dấu có thể kéo

Tùy chỉnh trình đánh dấu thêm

Đang chuyển đổi đối tượng `MarkerImage` thành loại `Icon`