地點圖示

選取平台： Android iOS JavaScript 網頁服務

地點圖示會指出不同類型的地點 (例如咖啡店、圖書館和博物館)。您可以使用 Current Place 和 Place Details 要求，取得 PNG 格式的圖示網址，以及對應的圖示背景顏色。

如要要求地點的圖示圖片和背景顏色，請在要求中加入下列欄位：

  • GMSPlaceFieldIconImageURL
  • GMSPlaceFieldIconBackgroundColor

以下範例示範如何使用目前地點或 Place Details 要求中的圖示圖片和背景顏色：

iOS 版 Places Swift SDK

// 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]];
      });
});

欄位

每個地點圖示都包含以下三個欄位：

  • iconImageUrl 會傳回非彩色 PNG 圖示的基準網址。
  • iconBackgroundColor 會傳回地點類別的預設 UIExtendedSRGBColorSpace 顏色代碼。

地點圖示和背景顏色要求

下表依類別列出所有可用的地點圖示。圖示會預設以黑色字符顯示。圖示背景顏色取決於地點類別。

地點類別：餐飲
(圖示背景顏色 #FF9E67)
酒吧
酒吧、
夜店 		咖啡館
咖啡館 		餐廳
餐廳、麵包店
地點類別：零售
(圖示背景顏色 #4B96F3)
書店
書籍、服飾、電子產品、珠寶、鞋子、
購物中心/商場 		便利商店
便利商店 		雜貨店
雜貨店、超市 		藥局
藥局
地點類別：服務
(圖示背景顏色 #909CE1)
提款機
提款機 		銀行
銀行 		加油站
加油站 		住宿地點
住宿地點
郵局
郵局
地點類別：娛樂
(圖示背景顏色 #13B5C7)
水族館、觀光旅遊
水族館、觀光旅遊 		高爾夫
高爾夫 		歷史古蹟
歷史古蹟 		電影
電影
博物館
博物館 		劇場
劇場
地點類別：交通運輸
(圖示背景顏色 #10BDFF)
機場
機場 		公車
公車、代僱駕駛服務、計程車 		火車/鐵路
火車/鐵路
地點類別：市政/一般/宗教
(圖示背景顏色 #7B9EB0)
墓園
墓園 		市政建築
市政建築 		圖書館
圖書館 		紀念碑
紀念碑
停車場
停車場 		學校 (小學、中學、大專院校)
學校 (小學、中學、大專院校) 		宗教 (基督教)
宗教 (基督教)
宗教 (印度教)
宗教 (印度教) 		宗教 (伊斯蘭教)
宗教 (伊斯蘭教) 		宗教 (耆那教)
宗教 (耆那教) 		宗教 (猶太教)
宗教 (猶太教)
宗教 (錫克教)
宗教 (錫克教) 		一般業務
一般業務
地點類別：戶外
(圖示背景顏色 #4DB546)
乘船
乘船 		露營
露營 		公園
公園 		體育場館
體育場館
動物園
動物園
地點類別：緊急狀況
(圖示背景顏色 #F88181)
醫院
醫院 		警察局
警察局