Tùy chỉnh điểm đánh dấu cơ bản

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

Điểm đánh dấu nâng cao sử dụng hai lớp để xác định điểm đánh dấu: lớp AdvancedMarkerElement cung cấp các tham số cơ bản (position, title và map) và lớp PinElement chứa các tuỳ chọn để tuỳ chỉnh thêm. Đoạn mã sau đây hiển thị mã để tạo PinElement mới, sau đó áp dụng cho điểm đánh dấu.

// Create a pin element.
const pin = new PinElement({
    scale: 1.5,
});
// Create a marker and apply the element.
const marker = new AdvancedMarkerElement({
    map,
    position: { lat: 37.419, lng: -122.02 },
    content: pin.element,
});

Trong bản đồ được tạo bằng HTML, các tham số cơ bản cho một điểm đánh dấu được khai báo bằng cách sử dụng phần tử HTML gmp-advanced-marker; bất kỳ tuỳ chỉnh nào sử dụng Lớp PinElement phải được áp dụng theo phương thức lập trình. Để thực hiện việc này, mã của bạn phải truy xuất các phần tử gmp-advanced-marker từ trang HTML. Đoạn mã sau đây cho thấy mã để truy vấn một tập hợp các phần tử gmp-advanced-marker, sau đó lặp lại các kết quả để áp dụng tuỳ chỉnh đã khai báo trong PinElement.

// Return an array of markers.
const advancedMarkers = [...document.querySelectorAll('gmp-advanced-marker')];

// Loop through the markers
for (let i = 0; i < advancedMarkers.length; i++) {
  const pin = new PinElement({
      scale: 2.0,
  });

  marker.appendChild(pin.element);
}

Trang này cho bạn biết cách tuỳ chỉnh điểm đánh dấu theo các cách sau:

Các phần của Điểm đánh dấu nâng cao.
Hình 1: Các phần của Điểm đánh dấu nâng cao.

Thêm văn bản tiêu đề

Văn bản tiêu đề xuất hiện khi con trỏ di chuột qua một điểm đánh dấu. Văn bản tiêu đề có thể đọc được bằng trình đọc màn hình.

Để thêm văn bản tiêu đề theo phương thức lập trình, hãy sử dụng AdvancedMarkerElement.title tuỳ chọn:

// Default marker with title text (no PinElement).
const markerViewWithText = new AdvancedMarkerElement({
  map,
  position: { lat: 37.419, lng: -122.03 },
  title: "Title text for the marker at lat: 37.419, lng: -122.03",
});
index.js

Để thêm văn bản tiêu đề vào điểm đánh dấu được tạo bằng HTML, hãy sử dụng thuộc tính title:

<gmp-map
  center="43.4142989,-124.2301242"
  zoom="4"
  map-id="DEMO_MAP_ID"
  style="height: 400px"
>
  <gmp-advanced-marker
    position="37.4220656,-122.0840897"
    title="Mountain View, CA"
  ></gmp-advanced-marker>
  <gmp-advanced-marker
    position="47.648994,-122.3503845"
    title="Seattle, WA"
  ></gmp-advanced-marker>
</gmp-map>
index.html

Điều chỉnh tỷ lệ điểm đánh dấu

Để điều chỉnh tỷ lệ điểm đánh dấu, hãy sử dụng tuỳ chọn scale.

TypeScript

// Adjust the scale.
const pinScaled = new PinElement({
    scale: 1.5,
});
const markerViewScaled = new AdvancedMarkerElement({
    map,
    position: { lat: 37.419, lng: -122.02 },
    content: pinScaled.element,
});
index.ts

JavaScript

// Adjust the scale.
const pinScaled = new PinElement({
  scale: 1.5,
});
const markerViewScaled = new AdvancedMarkerElement({
  map,
  position: { lat: 37.419, lng: -122.02 },
  content: pinScaled.element,
});
index.js

Thay đổi màu nền

Sử dụng tuỳ chọn PinElement.background để thay đổi màu nền của một điểm đánh dấu:

TypeScript

// Change the background color.
const pinBackground = new PinElement({
    background: '#FBBC04',
});
const markerViewBackground = new AdvancedMarkerElement({
    map,
    position: { lat: 37.419, lng: -122.01 },
    content: pinBackground.element,
});
index.ts

JavaScript

// Change the background color.
const pinBackground = new PinElement({
  background: "#FBBC04",
});
const markerViewBackground = new AdvancedMarkerElement({
  map,
  position: { lat: 37.419, lng: -122.01 },
  content: pinBackground.element,
});
index.js

Thay đổi màu đường viền

Dùng tuỳ chọn PinElement.borderColor để thay đổi màu đường viền của điểm đánh dấu:

TypeScript

// Change the border color.
const pinBorder = new PinElement({
    borderColor: '#137333',
});
const markerViewBorder = new AdvancedMarkerElement({
    map,
    position: { lat: 37.415, lng: -122.035 },
    content: pinBorder.element,
});
index.ts

JavaScript

// Change the border color.
const pinBorder = new PinElement({
  borderColor: "#137333",
});
const markerViewBorder = new AdvancedMarkerElement({
  map,
  position: { lat: 37.415, lng: -122.035 },
  content: pinBorder.element,
});
index.js

Thay đổi màu ký tự

Sử dụng tuỳ chọn PinElement.glyphColor để thay đổi màu ký tự của điểm đánh dấu:

TypeScript

// Change the glyph color.
const pinGlyph = new PinElement({
    glyphColor: 'white',
});
const markerViewGlyph = new AdvancedMarkerElement({
    map,
    position: { lat: 37.415, lng: -122.025 },
    content: pinGlyph.element,
});
index.ts

JavaScript

// Change the glyph color.
const pinGlyph = new PinElement({
  glyphColor: "white",
});
const markerViewGlyph = new AdvancedMarkerElement({
  map,
  position: { lat: 37.415, lng: -122.025 },
  content: pinGlyph.element,
});
index.js

Thêm văn bản vào một ký tự

Dùng lựa chọn PinElement.glyph để thay thế ký tự mặc định bằng một văn bản . Ký tự văn bản của PinElement tăng tỷ lệ bằng PinElement và màu mặc định khớp với màu glyphColor mặc định của PinElement.

TypeScript

const pinTextGlyph = new PinElement({
    glyph: 'T',
    glyphColor: 'white',
});
const markerViewGlyphText = new AdvancedMarkerElement({
    map,
    position: { lat: 37.415, lng: -122.015 },
    content: pinTextGlyph.element,
});
index.ts

JavaScript

const pinTextGlyph = new PinElement({
  glyph: "T",
  glyphColor: "white",
});
const markerViewGlyphText = new AdvancedMarkerElement({
  map,
  position: { lat: 37.415, lng: -122.015 },
  content: pinTextGlyph.element,
});
index.js

Ẩn ký tự

Đặt tuỳ chọn PinElement.glyph thành một chuỗi trống để ẩn ký tự của điểm đánh dấu:

TypeScript

// Hide the glyph.
const pinNoGlyph = new PinElement({
    glyph: '',
});
const markerViewNoGlyph = new AdvancedMarkerElement({
    map,
    position: { lat: 37.415, lng: -122.005 },
    content: pinNoGlyph.element,
});
index.ts

JavaScript

// Hide the glyph.
const pinNoGlyph = new PinElement({
  glyph: "",
});
const markerViewNoGlyph = new AdvancedMarkerElement({
  map,
  position: { lat: 37.415, lng: -122.005 },
  content: pinNoGlyph.element,
});
index.js

Ngoài ra, hãy đặt PinElement.glyphColor thành cùng một giá trị với PinElement.background. Điều này có tác dụng ẩn ký tự một cách trực quan.

Các bước tiếp theo: