iOS Swift下Mapbox v10.7.0添加类谷歌地图定位按钮实现返回当前位置

核心思路 #

借助Mapbox内置的LocationComponent处理用户定位逻辑，搭配内置或自定义定位按钮，实现点击按钮快速回到用户当前位置的功能。

步骤实现 #

1. 配置位置权限

• Android：在AndroidManifest.xml中添加权限声明：

  <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
  <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
  

  并在代码中动态申请权限（适配Android 6及以上系统）。

• iOS：在Info.plist中添加定位权限描述：

  <key>NSLocationWhenInUseUsageDescription</key>
  <string>需要获取您的位置以显示当前位置</string>
  

2. 初始化LocationComponent

当地图加载完成后，启用LocationComponent来获取并显示用户位置：

Android（Kotlin）示例：

mapView.getMapAsync { mapboxMap ->
    val locationComponent = mapView.locationComponent

    if (ContextCompat.checkSelfPermission(this, Manifest.permission.ACCESS_FINE_LOCATION) == PackageManager.PERMISSION_GRANTED) {
        // 启用位置组件
        locationComponent.isEnabled = true
        // 设置定位模式为跟踪摄像头（拖动地图后自动停止跟踪，可通过按钮恢复）
        locationComponent.cameraMode = CameraMode.TRACKING
        // 显示定位图标和精度圈
        locationComponent.renderMode = RenderMode.NORMAL
    }
}

iOS（Swift）示例：

mapView.mapboxMap.onNext(event: .mapLoaded) { [weak self] _ in
    guard let self = self else { return }
    // 启用位置组件并设置定位 puck 样式
    self.mapView.location.options.puckType = .puck2D()
    self.mapView.location.options.puckBearing = .heading
    self.mapView.location.updateLocationMode(.follow)
}

3. 添加返回当前位置的按钮

有两种实现方式可选：

方式一：使用Mapbox内置定位按钮

Mapbox提供默认的定位按钮，点击后自动将地图视角切回用户当前位置：

Android：在布局文件中添加组件：

<com.mapbox.maps.plugin.locationcomponent.LocationComponentActivationButton
    android:id="@+id/locationButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    android:layout_gravity="bottom|end" />

代码中绑定到地图：

val locationButton = findViewById<LocationComponentActivationButton>(R.id.locationButton)
locationButton.mapboxMap = mapboxMap

iOS：SDK默认在地图右下角显示定位按钮，可调整位置：

mapView.location.button.position = .bottomRight
mapView.location.button.margin = UIEdgeInsets(top: 0, left: 0, bottom: 32, right: 16)

方式二：自定义按钮

若需要自定义按钮样式，可添加按钮并实现点击逻辑：

Android（Kotlin）示例：

val customLocationBtn = findViewById<Button>(R.id.customLocationBtn)
customLocationBtn.setOnClickListener {
    if (ContextCompat.checkSelfPermission(this, Manifest.permission.ACCESS_FINE_LOCATION) == PackageManager.PERMISSION_GRANTED) {
        locationComponent.forceLocationUpdate() // 强制刷新位置
        // 将地图移动到用户当前位置
        mapboxMap.cameraState.location?.let { location ->
            mapboxMap.setCamera(
                CameraOptions.Builder()
                    .center(Point.fromLngLat(location.longitude, location.latitude))
                    .zoom(15.0)
                    .build()
            )
            // 可选：恢复跟踪模式
            locationComponent.cameraMode = CameraMode.TRACKING
        }
    }
}

iOS（Swift）示例：

let customLocationBtn = UIButton(type: .system)
customLocationBtn.setTitle("回到当前位置", for: .normal)
customLocationBtn.addTarget(self, action: #selector(goToCurrentLocation), for: .touchUpInside)
// 自行布局按钮到合适位置

@objc func goToCurrentLocation() {
    guard let location = mapView.location.latestLocation else { return }
    let cameraOptions = CameraOptions(
        center: CLLocationCoordinate2D(latitude: location.coordinate.latitude, longitude: location.coordinate.longitude),
        zoom: 15
    )
    mapView.mapboxMap.setCamera(to: cameraOptions)
    // 可选：恢复跟踪模式
    mapView.location.updateLocationMode(.follow)
}

4. 自定义定位图标

若需替换默认定位图标：

Android：通过LocationComponentOptions自定义：

val locationComponentOptions = LocationComponentOptions.builder(this)
    .pulseEnabled(true)
    .foregroundDrawable(R.drawable.your_custom_icon)
    .build()
locationComponent.applyStyle(locationComponentOptions)

iOS：自定义Puck样式：

let customPuck = Puck2D(
    topImage: UIImage(named: "your_custom_icon"),
    bearingImage: UIImage(named: "your_bearing_icon")
)
mapView.location.options.puckType = .puck2D(customPuck)

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