Biểu tượng địa điểm

Biểu tượng địa điểm cho biết nhiều loại địa điểm (ví dụ: quán cà phê, thư viện và bảo tàng). Bạn có thể yêu cầu biểu tượng và màu nền của biểu tượng bằng cách sử dụng Lớp địa điểm.

Trường

Sử dụng các trường sau để làm việc với biểu tượng địa điểm:

• icon trả về URL cho biểu tượng PNG có màu 71px x 71px (chỉ dành cho Dịch vụ địa điểm).
• iconBackgroundColor và icon_background_color trả về mã màu HEX mặc định cho danh mục của biểu tượng địa điểm.
• icon_mask_base_uri (Dịch vụ địa điểm) trả về URL cơ sở cho một biểu tượng không có màu, trừ phần đuôi loại tệp (thêm .svg hoặc .png).
• svgIconMaskURI (Lớp địa điểm) trả về URL cơ sở cho biểu tượng SVG không màu.

Áp dụng biểu tượng và màu sắc của địa điểm cho điểm đánh dấu

Với Place Details, bạn có thể yêu cầu biểu tượng địa điểm và màu nền mà bạn có thể áp dụng cho điểm đánh dấu. Ví dụ sau đây cho thấy mã để tạo điểm đánh dấu bằng dữ liệu địa điểm bằng cách truyền place.iconBackgroundColor đến tuỳ chọn PinElement.background và place.svgIconMaskURI đến PinElement.glyph. Sử dụng place.location để đặt điểm đánh dấu vào đúng vị trí. Ví dụ này cũng hiển thị place.displayName trong tiêu đề điểm đánh dấu.

// A marker customized using a place icon and color, name, and geometry.
const place = new Place({
    id: 'ChIJN5Nz71W3j4ARhx5bwpTQEGg',
});

// Call fetchFields, passing the desired data fields.
await place.fetchFields({
    fields: [
        'location',
        'displayName',
        'svgIconMaskURI',
        'iconBackgroundColor',
    ],
});

const pinElement = new PinElement({
    background: place.iconBackgroundColor,
    glyphSrc: new URL(String(place.svgIconMaskURI)),
});

const placeIconMarker = new AdvancedMarkerElement({
    position: place.location,
    title: place.displayName,
});
placeIconMarker.append(pinElement);
mapElement.append(placeIconMarker);
index.ts

// A marker customized using a place icon and color, name, and geometry.
const place = new Place({
    id: 'ChIJN5Nz71W3j4ARhx5bwpTQEGg',
});

// Call fetchFields, passing the desired data fields.
await place.fetchFields({
    fields: [
        'location',
        'displayName',
        'svgIconMaskURI',
        'iconBackgroundColor',
    ],
});

const pinElement = new PinElement({
    background: place.iconBackgroundColor,
    glyphSrc: new URL(String(place.svgIconMaskURI)),
});

const placeIconMarker = new AdvancedMarkerElement({
    position: place.location,
    title: place.displayName,
});
placeIconMarker.append(pinElement);
mapElement.append(placeIconMarker);
index.js

Yêu cầu về biểu tượng địa điểm và màu nền

Bảng sau đây trình bày tất cả biểu tượng địa điểm hiện có theo danh mục. Theo mặc định, các biểu tượng này hiển thị bằng một ký tự màu đen. Màu nền của biểu tượng được quyết định theo danh mục của địa điểm.

Danh mục địa điểm: Đồ ăn và đồ uống (màu nền biểu tượng #FF9E67)
Quán bar, Hộp đêm	Quán cà phê	Nhà hàng, tiệm bánh
Danh mục địa điểm: Bán lẻ (màu nền biểu tượng #4B96F3)
Sách, Quần áo, Đồ điện tử, Đồ trang sức, Giày dép, Trung tâm mua sắm/Trung tâm thương mại	Cửa hàng tiện lợi	Cửa hàng tạp hoá, siêu thị	Hiệu thuốc
Danh mục địa điểm: Dịch vụ (màu nền biểu tượng #909CE1)
ATM	Ngân hàng	Xăng	Chỗ nghỉ
Bưu điện
Danh mục địa điểm: Giải trí (màu nền biểu tượng #13B5C7)
Thuỷ cung, Khách du lịch	Golf	Lịch sử	Phim
Bảo tàng	Nhà hát
Danh mục địa điểm: Giao thông vận tải (màu nền biểu tượng #10BDFF)
Sân bay	Xe buýt, dịch vụ đi chung xe, taxi	Tàu hoả/Đường sắt
Danh mục địa điểm: Thành phố/chung/tôn giáo (màu nền biểu tượng #7B9EB0)
Nghĩa trang	Toà thị chính	Thư viện	Đài tưởng niệm
Đỗ xe	Trường học (tiểu học, trung học, đại học)	Thờ phượng (Cơ đốc giáo)
Thờ phượng (Ấn Độ giáo)	Thờ phượng (Hồi giáo)	Thờ phượng (đạo Jaina)	Thờ phượng (Do Thái giáo)
Thờ phượng (đạo Sikh)	Doanh nghiệp chung
Danh mục địa điểm: Ngoài trời (màu nền biểu tượng #4DB546)
Đi thuyền	Cắm trại	Công viên	Sân vận động
Sở thú
Danh mục địa điểm: Khẩn cấp (màu nền biểu tượng #F88181)
Bệnh viện	Cảnh sát