Biểu tượng địa điểm thể hiện 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 các biểu tượng và màu nền của các biểu tượng đó bằng cách sử dụng Lớp địa điểm hoặc Dịch vụ địa điểm.
Các trường
Sử dụng các trường sau để làm việ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 71px x 71px màu (chỉ 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ừ đi đuôi tệp (nối.svg
hoặc.png
).svgIconMaskURI
(Place Class) trả về URL cơ sở cho biểu tượng SVG không màu.
Áp dụng màu và biểu tượng địa điểm cho điểm đánh dấu
Với Thông tin chi tiết về đị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 cho 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 chuyển place.iconBackgroundColor
vào tuỳ chọn PinElement.background
và place.svgIconMaskURI
vào PinElement.glyph
. Hãy 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, });
Biểu tượng địa điểm và yêu cầu màu nền
Các bảng sau đây hiển thị tất cả cá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ự 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, 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 |
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 |
Cơ sở 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, Khu du lịch |
Chơi gôn |
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, dịch vụ đi chung xe, taxi |
Xe lửa/��ường ray |
|
Loại đị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 |
Tượng đài |
Đỗ xe |
Trường học (tiểu học, trung học, đại học) |
Thờ phụng (Cơ-đốc) |
|
Đền thờ (Hindu) |
Tôn thờ (Hồi giáo) |
Thờ phụng (Jain) |
Thờ phụng (Do Thái) |
Tín ngưỡng (Sikh) |
Doanh nghiệp 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 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 |