Tuỳ chỉnh điểm đánh dấu cơ bản

API Điểm đánh dấu cho Bản đồ 3D sử dụng 2 lớp để xác định điểm đánh dấu: lớp Marker3DElement cung cấp các tham số cơ bản (position, label và map), còn lớp PinElement chứa các tuỳ chọn để tuỳ chỉnh thêm.

Để thêm điểm đánh dấu vào bản đồ, trước tiên, bạn phải tải thư viện điểm đánh dấu. Thư viện này cung cấp các lớp Marker3DElement và PinElement.

Đoạn mã sau đây cho thấy mã để tạo PinElement mới, sau đó áp dụng mã đó cho điểm đánh dấu:

// Adjust the scale.
const pinScaled = new PinElement({
    scale: 1.5,
});
const markerWithScale = new Marker3DElement({
    position: { lat: 37.419, lng: -122.02 },
});
markerWithScale.append(pinScaled);

Trong bản đồ được tạo bằng HTML, các tham số cơ bản cho điểm đánh dấu được khai báo bằng phần tử HTML gmp-marker-3d; mọi hoạt động tuỳ chỉnh sử dụng lớp PinElement đều 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-marker-3d 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-marker-3d, sau đó lặp lại các kết quả để áp dụng hoạt động tuỳ chỉnh đã được khai báo trong gmp-marker-3d.

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

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

  markers[i].appendChild(pin.element);
}

Trang này hướng dẫn bạn cách tuỳ chỉnh điểm đánh dấu theo những cách sau:

Đ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:

// Adjust the scale.
const pinScaled = new PinElement({
    scale: 1.5,
});
const markerWithScale = new Marker3DElement({
    position: { lat: 37.419, lng: -122.02 },
});
markerWithScale.append(pinScaled);

Thay đổi màu nền

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

// Change the background color.
const pinBackground = new PinElement({
    background: '#FBBC04',
});

const markerWithBackground = new Marker3DElement({
    position: { lat: 37.419, lng: -122.01 },
});
markerWithBackground.append(pinBackground);

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

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

// Change the border color.
const pinBorder = new PinElement({
    borderColor: '#FFFFFF',
});
const markerWithBorder = new Marker3DElement({
    position: { lat: 37.415, lng: -122.035 },
});
markerWithBorder.append(pinBorder);

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:

// Change the glyph color.
const pinGlyph = new PinElement({
    glyphColor: 'white',
});
const markerWithGlyphColor = new Marker3DElement({
    position: { lat: 37.415, lng: -122.025 },
});
markerWithGlyphColor.append(pinGlyph);

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

Sử dụng tuỳ chọn PinElement.glyph để thay thế ký tự mặc định bằng ký tự văn bản. Ký tự văn bản của PinElement điều chỉnh tỷ lệ theo PinElement và màu mặc định của ký tự này khớp với glyphColor mặc định của PinElement:

// Change many elements together and extrude marker.
const pinTextGlyph = new PinElement({
    background: '#F0F6FC',
    glyphText: 'E',
    glyphColor: 'red',
    borderColor: '#0000FF',
});
const markerWithGlyphText = new Marker3DElement({
    position: { lat: 37.415, lng: -122.015, altitude: 50 },
    extruded: true,
    altitudeMode: 'RELATIVE_TO_GROUND',
});
markerWithGlyphText.append(pinTextGlyph);

Thay đổi độ cao

Sử dụng tuỳ chọn Marker3DElement.position.altitude kết hợp với Marker3DElement.altitudeMode và Marker3DElement.extruded để thay đổi độ cao của điểm đánh dấu và thêm đường kéo dài giữa mặt đất và điểm đánh dấu:

// Change a marker's altitude and add an extrusion.
const extrudedMarker = new Marker3DElement({
    position: { lat: 37.4239163, lng: -122.0947209, altitude: 100 },
    altitudeMode: 'RELATIVE_TO_GROUND',
    extruded: true,
});

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

Sử dụng Marker3DElement.remove() để xoá điểm đánh dấu khỏi bản đồ:

const marker = document.querySelector('gmp-marker-3d');
marker.remove();

Các bước tiếp theo