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:
Trường | Lớp địa điểm | Dịch vụ địa điểm |
---|---|---|
Biểu tượng | --- | icon |
Màu nền biểu tượng | iconBackgroundColor |
icon_background_color |
URI mặt nạ biểu tượng | svgIconMaskURI |
icon_mask_base_uri |
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.
TypeScript
// 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, });
JavaScript
// 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, });
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) |
|||
---|---|---|---|
Câu lạc bộ đêm |
|
|
|
Danh mục địa điểm: Bán lẻ (màu nền biểu tượng #4B96F3) |
|||
Trung tâm mua sắm/Trung tâm mua sắm |
![]() |
|
|
Danh mục địa điểm: Dịch vụ (màu nền biểu tượng #909CE1) |
|||
|
|
|
|
|
|||
Danh mục địa điểm: Giải trí (màu nền biểu tượng #13B5C7) |
|||
|
|
|
|
|
|
||
Danh mục địa điểm: Vận tải (màu nền biểu tượng #10BDFF) |
|||
|
|
|
|
Danh mục địa điểm: Thành phố/chung/tôn giáo (màu nền biểu tượng #7B9EB0) |
|||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||
Danh mục địa điểm: Ngoài trời (màu nền biểu tượng #4DB546) |
|||
|
|
|
|
|
|||
Danh mục địa điểm: Khẩn cấp (màu nền biểu tượng #F88181) |
|||
|
|