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

Chọn nền tảng: Android iOS JavaScript Dịch vụ web

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,
});
index.ts

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,
});
index.js
Xem ví dụ

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
Quán bar,
Câu lạc bộ đêm 		Quán cà phê
Quán cà phê 		Nhà hàng
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)
Nhà sách
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 tiện lợi 		Hàng tạp hoá
Hàng tạp hoá, Siêu thị 		Hiệu thuốc
Hiệu thuốc
Danh mục địa điểm: Dịch vụ
(màu nền biểu tượng #909CE1)
ATM
ATM 		Ngân hàng
Ngân hàng 		Trạm xăng
Xăng 		Phòng cho thuê
Cơ sở lưu trú
Bưu điện
Bưu điện
Danh mục địa điểm: Giải trí
(màu nền biểu tượng #13B5C7)
Thuỷ cung, Du lịch
Thuỷ cung, Khu du lịch 		Sân gôn
Chơi gôn 		Cổ
Lịch sử 		Phim
Phim
Bảo tàng
Bảo tàng 		Nhà hát
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
Sân bay 		Xe buýt
Xe buýt, dịch vụ đi chung xe, taxi 		Tàu hoả/đường ray
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
Nghĩa trang 		Nhà thị chính
Toà thị chính 		Thư viện Thư viện
 Đài tưởng niệm
Tượng đài
Bãi đỗ xe
Đỗ xe 		Trường học (tiểu học, trung học, đại học)
Trường học (tiểu học, trung học, đại học) 		Thờ phụng (Cơ đốc giáo)
Thờ phụng (Cơ-đốc)
Thờ phụng (Hindu)
Đền thờ (Hindu) 		Thờ phụng (Hồi giáo)
Tôn thờ (Hồi giáo) 		Thờ phụng (Tân)
Thờ phụng (Jain) 		Thờ phụng (Do Thái)
Thờ phụng (Do Thái)
Nhạc thờ (Sikh)
Tín ngưỡng (Sikh) 		Doanh nghiệp nói chung
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
Đi thuyền 		Cắm trại
Cắm trại 		Công viên
Công viên 		Sân vận động
Sân vận động
Vườn bách thú
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
Bệnh viện 		Cảnh sát
Cảnh sát