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 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 URL cho biểu tượng ở định dạng PNG, cũng như màu nền biểu tượng tương ứng, bằng các yêu cầu Địa điểm hiện tại và Thông tin chi tiết về địa điểm.

Để yêu cầu hình ảnh biểu tượng và màu nền cho một địa điểm, hãy thêm các trường sau vào yêu cầu của bạn:

  • GMSPlaceFieldIconImageURL
  • GMSPlaceFieldIconBackgroundColor

Các ví dụ sau đây minh hoạ cách sử dụng hình ảnh biểu tượng và màu nền từ yêu cầu Địa điểm hiện tại hoặc Thông tin chi tiết về địa điểm:

SDK Swift của Địa điểm dành cho iOS

// Initialize Places Swift client
let placesClient = PlacesClient.shared
      
// A hotel in Saigon with an attribution.
let placeID = "ChIJV4k8_9UodTERU5KXbkYpSYs"

// Specify the place data types to return.
let fetchPlaceRequest = FetchPlaceRequest(
  placeID: placeID,
  placeProperties: [.displayName, .iconMaskURL, .iconBackgroundColor]
)
      
Task {
      switch await placesClient.fetchPlace(with: fetchPlaceRequest) {
        case .success(let place):
        // Print displayName using String(describing:)
        print("The selected place is: \(String(describing: place.displayName))")

        // We primarily need the iconMaskURL to proceed with image loading.
        // iconBackgroundColor can be handled even if nil.
        guard let iconMaskURL = place.iconMaskURL else {
            print("Icon mask URL not available for this place. Cannot display icon.")
            return // Exit if iconMaskURL is missing
        }

        print("The icon mask URL is: \(iconMaskURL)")
        // Print iconBackgroundColor using String(describing:)
        print("The icon background color is: \(String(describing: place.iconBackgroundColor))")


        // Asynchronously load the icon image
        DispatchQueue.global().async {
            // The iconMaskURL from the new Places SDK is already a URL
            guard let imageData = try? Data(contentsOf: iconMaskURL) else {
                print("Could not download image data from URL: \(iconMaskURL)")
                return
            }

            DispatchQueue.main.async {
                guard let iconImage = UIImage(data: imageData) else {
                    print("Could not create UIImage from downloaded data.")
                    return
                }

                // --- Example of how you might use the icon and background color ---
                // Ensure you have an imageView outlet connected in your UI
                // For example:
                // @IBOutlet weak var myImageViewContainer: UIView!
                // @IBOutlet weak var myIconImageView: UIImageView!
                // For this example, we'll create them programmatically:

                let iconBackgroundView = UIView(frame: CGRect(x: 0, y: 0, width: 50, height: 50)) // Adjust frame as needed
                // Directly assign the optional UIColor. If nil, background will be clear.
                iconBackgroundView.backgroundColor = place.iconBackgroundColor

                let imageView = UIImageView() // Initialize an empty UIImageView
                imageView.frame = iconBackgroundView.bounds // Make icon view same size as background
                imageView.contentMode = .scaleAspectFit // Adjust content mode as needed

                // Tint the icon image (mask) to white
                // The icon from iconMaskURL is intended to be used as a mask.
                let templateImage = iconImage.withRenderingMode(.alwaysTemplate)
                imageView.image = templateImage
                imageView.tintColor = UIColor.white

                // Add the image view on top of the background view
                iconBackgroundView.addSubview(imageView)
        }
      }
  }
}

Swift

// Icon image URL
let url = URL(string: place.iconImageUrl)
DispatchQueue.global().async {
    guard let url = url,
        let imageData = try? Data(contentsOf: url) else {
      print("Could not get image")
      return
    }
    DispatchQueue.main.async {
      let iconImage = UIImage(data: iconImageData)

      // Icon image background color
      let iconBackgroundView = UIView(frame: .zero)
      iconBackgroundView.backgroundColor = place.iconBackgroundColor

      // Change icon image color to white
      let templateImage = iconImage.imageWithRenderingMode(UIImageRenderingModeAlwaysTemplate)
      imageView.image = templateImage
      imageView.tintColor = UIColor.white
    }
}

Objective-C

GMSPlace *place;

dispatch_async(dispatch_get_global_queue(0, 0), ^{
  // Icon image URL
  NSData * iconImageData = [[NSData alloc] initWithContentsOfURL: [NSURL URLWithString: place.iconImageUrl]];
      if (!iconImageData)
          return;
      dispatch_async(dispatch_get_main_queue(), ^{
        UIImage *iconImage = [UIImage imageWithData:iconImageData];

        // Icon image background color
        UIView *iconBackgroundView = [[UIView alloc] initWithFrame:CGRectZero];
        [iconBackgroundView setBackgroundColor:place.iconBackgroundColor];

        // Change icon image color to white
        iconImage = [iconImage imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
        [imageView setTintColor:[UIColor whiteColor]];
      });
});

Trường

Mỗi biểu tượng Địa điểm chứa các trường sau:

  • iconImageUrl trả về URL cơ sở cho biểu tượng PNG không có màu.
  • iconBackgroundColor trả về mã màu UIExtendedSRGBColorSpace mặc định cho danh mục của địa điểm.

Đặt yêu cầu về màu nền và biểu tượng

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

Danh mục địa điểm: Đồ ăn và đồ uống
(màu nền của 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)
Hiệu sách
Sách, Quần áo, Điện tử, Trang sức, Giày,
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 tiện lợi 		Cửa hàng tạp hoá
Cửa 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
Khí 		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)
Thủy cung, Du lịch
Thuỷ cung, Du lịch 		Sân gôn
Golf 		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: Phương tiện giao thông
(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 sắt
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
Nghĩa trang 		Nhà thị chính
Toà nhà hành chính 		Thư viện
Thư viện 		Đài tưởng niệm
Đài tưởng niệm
Bãi đỗ xe
Bãi đỗ 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) 		Nhạc thờ phượng (Cơ Đốc giáo)
Nhạc thờ cúng (Tín đồ đạo Cơ-đốc)
Nhạc thờ cúng (Ấn Độ giáo)
Thờ cúng (Ấn Độ giáo) 		Nhạc thờ cúng (Đạo Hồi)
Nhạc thờ cúng (Đạo Hồi) 		Thờ cúng (Jain)
Thờ cúng (Jain) 		Thờ phượng (Do Thái giáo)
Nhạc thờ cúng (Do Thái giáo)
Lễ thờ phượng (Sikh)
Thờ cúng (Sikh) 		Doanh nghiệp chung
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
Đ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