在iOS应用的Google StreetView PanoramaView中添加自定义标签与距离

一、计算街景与标记的距离 #

要实时获取街景位置和标记的距离，核心是利用街景位置变化的回调，结合CLLocation的距离计算能力：

1. 通过GMSPanoramaViewDelegate的panoramaView(_:didMoveTo:)方法，监听街景位置的所有变化（包括初始加载、用户拖动街景）。
2. 将街景坐标和标记坐标分别转为CLLocation实例，调用distance(from:)方法计算距离（单位为米）。
3. 根据需求格式化距离显示（比如小于1000米显示米数，大于等于1000米显示公里数）。

二、自定义标记的标签与距离展示 #

Google Maps SDK的GMSMarker支持通过iconView设置自定义视图，用来灵活展示标签和距离：

• 创建包含UILabel的UIView作为标记的显示载体，自定义背景、字体、尺寸等样式。
• 将自定义视图赋值给marker的iconView，并在距离更新时同步更新label文本。

三、完整代码实现 #

import UIKit
import GoogleMaps

class StreetViewController: UIViewController, GMSPanoramaViewDelegate {
    private var panoView: GMSPanoramaView!
    private var marker: GMSMarker!
    private var distanceLabel: UILabel!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 初始化街景视图
        panoView = GMSPanoramaView(frame: self.view.bounds)
        panoView.delegate = self
        view.addSubview(panoView)
        
        // 设置初始街景位置与相机参数
        let initialCoord = CLLocationCoordinate2D(latitude: -33.732, longitude: 150.312)
        panoView.moveNearCoordinate(initialCoord)
        panoView.camera = GMSPanoramaCamera(heading: 180, pitch: -10, zoom: 1)
        
        // 创建标记
        marker = GMSMarker(position: initialCoord)
        marker.panoramaView = panoView
        
        // 初始化自定义标记视图
        setupCustomMarkerView()
    }
    
    // 构建自定义标记视图
    private func setupCustomMarkerView() {
        let markerView = UIView(frame: CGRect(x: 0, y: 0, width: 120, height: 40))
        markerView.backgroundColor = UIColor.white.withAlphaComponent(0.9)
        markerView.layer.cornerRadius = 8
        
        distanceLabel = UILabel(frame: markerView.bounds)
        distanceLabel.textAlignment = .center
        distanceLabel.font = UIFont.systemFont(ofSize: 14)
        distanceLabel.textColor = .black
        markerView.addSubview(distanceLabel)
        
        marker.iconView = markerView
    }
    
    // 街景位置变化时更新距离
    func panoramaView(_ panoramaView: GMSPanoramaView, didMoveTo panorama: GMSPanorama?) {
        guard let panoCoord = panorama?.coordinate else { return }
        let panoLocation = CLLocation(latitude: panoCoord.latitude, longitude: panoCoord.longitude)
        let markerLocation = CLLocation(latitude: marker.position.latitude, longitude: marker.position.longitude)
        
        // 计算距离（单位：米）
        let distanceInMeters = panoLocation.distance(from: markerLocation)
        
        // 格式化距离文本
        let distanceText: String
        if distanceInMeters < 1000 {
            distanceText = String(format: "目标点：%.1fm", distanceInMeters)
        } else {
            let distanceInKm = distanceInMeters / 1000
            distanceText = String(format: "目标点：%.1fkm", distanceInKm)
        }
        
        distanceLabel.text = distanceText
    }
}

关键提示 #

• 当用户拖动街景时，didMoveTo会自动触发，实现距离的实时更新。
• 如果有多个标记，可将标记存入数组，在didMoveTo中遍历更新每个标记的距离。
• 自定义视图的样式可根据产品需求自由调整（比如添加图标、修改配色）。

内容的提问来源于stack exchange，提问作者Nick Patel