Swift中如何创建并展示Google Maps自定义标记视图

嘿，我来一步步带你搞定在Swift开发环境里给Google Maps做自定义标记视图，以及怎么把它展示出来～

第一步：准备工作 #

首先得确保你已经正确集成了Google Maps SDK：

• 在你的Podfile里添加pod 'GoogleMaps'，然后执行pod install
• 在Info.plist里配置Google Maps的API密钥（添加GMSApiKey键，值为你的API密钥），还有必要的位置权限描述（比如NSLocationWhenInUseUsageDescription）

第二步：创建自定义标记视图类 #

咱们先写一个继承自UIView的自定义类，用来定义标记的外观——这里我做一个带图标和文字的示例，你可以根据自己的需求调整布局和样式：

import UIKit
import GoogleMaps

class CustomMarkerView: UIView {
    // 用于显示标记图标的ImageView
    private let markerImageView: UIImageView = {
        let iv = UIImageView()
        iv.contentMode = .scaleAspectFit
        iv.clipsToBounds = true
        return iv
    }()
    
    // 显示标记标题的Label
    private let titleLabel: UILabel = {
        let label = UILabel()
        label.textColor = .white
        label.font = UIFont.systemFont(ofSize: 12, weight: .bold)
        label.textAlignment = .center
        return label
    }()
    
    // 自定义初始化方法，传入图标和标题
    init(icon: UIImage, title: String) {
        // 先设置视图的基础尺寸，你可以根据需求修改
        super.init(frame: CGRect(x: 0, y: 0, width: 40, height: 50))
        setupSubviews()
        // 赋值传入的图标和标题
        markerImageView.image = icon
        titleLabel.text = title
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    // 布局子视图
    private func setupSubviews() {
        backgroundColor = .clear
        
        // 添加子视图到父视图
        addSubview(markerImageView)
        addSubview(titleLabel)
        
        // 关闭AutoLayout自动转换
        markerImageView.translatesAutoresizingMaskIntoConstraints = false
        titleLabel.translatesAutoresizingMaskIntoConstraints = false
        
        // 设置约束，让图标在上，文字在下居中
        NSLayoutConstraint.activate([
            markerImageView.topAnchor.constraint(equalTo: topAnchor),
            markerImageView.centerXAnchor.constraint(equalTo: centerXAnchor),
            markerImageView.widthAnchor.constraint(equalToConstant: 40),
            markerImageView.heightAnchor.constraint(equalToConstant: 40),
            
            titleLabel.topAnchor.constraint(equalTo: markerImageView.bottomAnchor, constant: 2),
            titleLabel.centerXAnchor.constraint(equalTo: centerXAnchor),
            titleLabel.widthAnchor.constraint(equalTo: widthAnchor),
            titleLabel.heightAnchor.constraint(equalToConstant: 16)
        ])
    }
}

第三步：在Google Maps中展示自定义标记 #

接下来就是把咱们的自定义标记添加到地图上，这里假设你有一个包含GMSMapView的视图控制器：

import UIKit
import GoogleMaps

class MapViewController: UIViewController {
    private var mapView: GMSMapView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 初始化地图视图，设置初始相机位置（这里以旧金山为例）
        let initialCamera = GMSCameraPosition.camera(withLatitude: 37.7749, longitude: -122.4194, zoom: 12)
        mapView = GMSMapView.map(withFrame: view.bounds, camera: initialCamera)
        view.addSubview(mapView)
        
        // 添加自定义标记到地图
        addCustomMarkerToMap()
    }
    
    private func addCustomMarkerToMap() {
        // 加载自定义标记的图标（确保你的Assets里有这个图片）
        guard let markerIcon = UIImage(named: "custom_marker_icon") else {
            print("找不到标记图标")
            return
        }
        let markerTitle = "旧金山"
        
        // 创建咱们的自定义标记视图实例
        let customMarker = CustomMarkerView(icon: markerIcon, title: markerTitle)
        
        // 创建GMSMarker对象
        let marker = GMSMarker()
        // 设置标记的位置
        marker.position = CLLocationCoordinate2D(latitude: 37.7749, longitude: -122.4194)
        // 把自定义视图赋值给marker的iconView属性，这一步是关键！
        marker.iconView = customMarker
        // 可选：设置标记的默认标题，点击时会弹出默认信息窗口
        marker.title = markerTitle
        // 把标记添加到地图上
        marker.map = mapView
    }
}

额外小贴士 #

• 如果想要自定义标记的信息窗口，可以实现GMSMapViewDelegate的mapView(_:markerInfoWindow:)方法，返回一个自定义的UIView作为信息窗口
• 自定义标记视图的尺寸要根据实际需求调整，避免显示不全或者布局错乱
• 如果需要给标记添加点击事件，可以通过GMSMapViewDelegate的mapView(_:didTap:)方法来处理

内容的提问来源于stack exchange，提问作者Sravan Kumar Talari