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

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

Trường

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

• icon trả về URL cho biểu tượng PNG có màu 71 px x 71 px (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ừ đuôi tệp (nối .svg hoặc .png).
• svgIconMaskURI (Lớp địa điểm) trả về URL cơ sở của một biểu tượng SVG không có màu sắc.

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

Với Chi tiết địa điểm, 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 vào các điểm đánh dấu. Ví dụ sau đây cho thấy mã để tạo một điểm đánh dấu sử dụng dữ liệu địa điểm bằng cách truyền place.iconBackgroundColor cho 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 đề của đ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,
    glyph: new URL(String(place.svgIconMaskURI)),
});

const placeIconMarkerView = new AdvancedMarkerElement({
    map,
    position: place.location,
    content: pinElement.element,
    title: place.displayName,
});
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,
  glyph: new URL(String(place.svgIconMaskURI)),
});
const placeIconMarkerView = new AdvancedMarkerElement({
  map,
  position: place.location,
  content: pinElement.element,
  title: place.displayName,
});
index.js

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

Các bảng sau hiển thị tất cả biểu tượng địa điểm có sẵn theo danh mục. Theo mặc định, các màn hình này có ký tự đen. Màu nền của biểu tượng do danh mục của địa điểm quyết định.

Danh mục địa điểm: Thực phẩm và đồ uống (màu nền biểu tượng #FF9E67)
Quán bar, Câu lạc bộ đê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 mua sắm	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	Nơi lưu trú
Bưu điện
Danh mục địa điểm: Giải trí (màu nền biểu tượng #13B5C7)
Thuỷ cung, dành cho khách du lịch	Môn đánh gôn	Có tính lịch sử	Phim
Bảo tàng	Nhà hát
Danh mục địa điểm: Vận tải (màu nền biểu tượng #10BDFF)
Sân bay	Xe buýt, đi chung xe, taxi	Tàu/đườ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
Bãi đỗ xe	Trường học (bậc tiểu học, trung học cơ sở, đại học)	Tôn giáo (Cơ Đốc giáo)
Tôn giáo (Hindu)	Tôn giáo (Đạo Hồi)	Tôn giáo (Jain)	Tôn giáo (Do Thái giáo)
Tôn giáo (Sikh)	Hoạt động kinh doanh nói 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
Vườn bách 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