SwiftUI之深入解析如何使用新地图框架MapKit

一、前言

  • 一旦将 App 目标更新到 iOS 17,Xcode 会将任何使用旧的 Map 初始化器的用法标记为已弃用:

在这里插入图片描述

  • 会有警告提示:init coordinate region 已在 iOS 17 中弃用。请改用带有 MapContentBuilder 参数的地图初始化器。在 iOS 17 中,MapKit 为 SwiftUI 引入了需要 MapContentBuilder 参数的地图初始化器。
  • 了解 iOS 17 中的 MapKit 后,可以发现 Apple 引入了更适合 SwiftUI 的 API。

二、MapContentBuilder(iOS 17)

  • 在 iOS 17 中,用于地图视图的各种初始化器都需要一个名为 MapContentBuilder 的 content 参数。MapContentBuilder 是一个结果构建器,允许在闭包中添加地图内容,例如标记、注释和自定义内容。
  • 那么如何使用呢?如下是一些伦敦地标的坐标:
extension CLLocationCoordinate2D {static let towerBridge = CLLocationCoordinate2D(latitude: 51.5055, longitude: -0.075406)static let boe = CLLocationCoordinate2D(latitude: 51.5142, longitude: -0.0885)static let hydepark = CLLocationCoordinate2D(latitude: 51.508611, longitude: -0.163611)static let kingsCross = CLLocationCoordinate2D(latitude: 51.5309, longitude: -0.1233)
}
  • 要创建一个带有标记和注释的地图视图,详细代码如下:
struct ContentView: View {var body: some View {Map {Marker("Tower Bridge", coordinate: .towerBridge)Marker("Hyde Park", coordinate: .hydepark)Marker("Bank of England", systemImage: "sterlingsign", coordinate: .boe).tint(.green)Annotation("Kings Cross", coordinate: .kingsCross, anchor: .bottom) {VStack {Text("在此搭乘火车!")Image(systemName: "train.side.front.car")}.foregroundColor(.blue).padding().background(in: .capsule)}}}
}
  • 在没有其他选项的情况下,地图视图的边界将包围地图内容。

三、地图交互

  • 为了控制用户与地图的交互方式,可以传递一组允许的模式。
  • 默认情况下允许所有模式(平移、缩放、倾斜、旋转),代码如下:
Map(interactionModes: [.pan,.pitch]) { ... }

四、地图样式

  • 使用 Map Style 视图修饰符可以在标准、卫星或混合样式之间切换,控制高度、显示兴趣点和显示交通情况,代码如下:
Map { ...
}
.mapStyle(.hybrid(elevation: .realistic,pointsOfInterest: .including([.publicTransport]), showsTraffic: true))

五、地图控件

  • 标准的地图控件,如指南针、用户位置、倾斜、比例尺和缩放控件都实现为 SwiftUI 视图。这意味着可以将它们放置在视图的任何位置,不过需要定义一个地图范围命名空间,以将它们与它们控制的地图关联起来,代码如下:
struct ContentView: View {@Namespace var mapScopevar body: some View {VStack {Map(scope: mapScope) { ... }MapCompass(scope: mapScope)}.mapScope(mapScope)}
}
  • 要将它们放置在标准位置,使用地图控件视图修饰符,代码如下:
Map { ...
}
.mapControls {MapPitchToggle()MapUserLocationButton()MapCompass()
}

六、地图相机位置

  • 地图相机位置定义了从地图表面上方查看地图的虚拟位置,可以使用现有的地图项、地图边界、区域或用户位置来创建地图相机位置并设置初始地图位置,代码如下:
Map(initialPosition: position)
  • 将 MapCameraPosition 的绑定传递给地图,使其在用户在地图上移动时跟踪相机位置,代码如下:
struct ContentView: View {@State private var position: MapCameraPosition = .region(.uk)var body: some View {Map(position: $position) {Marker("Tower Bridge", coordinate: .towerBridge)}}
}
  • 设置位置会导致地图更改其相机位置以匹配。例如,在用户移动位置后,要在 toolbar 中添加一个按钮,以将地图重置为初始位置,代码如下:
Map(position: $position) { ...
}
.toolbar {ToolbarItem {Button("重置") {position = .region(.uk)}}
}
  • 将位置设置为 .automatic 可以使地图框架内容。

七、总结

  • 通过引入 MapContentBuilder 和其他新的初始化器,可以更方便地创建交互式地图视图,添加标记、注释和自定义内容,并在用户移动地图相机时自动更新位置。
  • 此外,还可以使用 Map Style 修饰符和 Map 控件来自定义地图的样式和控件,这些改进使得在 SwiftUI 中使用 MapKit 变得更加强大和灵活。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/322828.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

看了致远OA的表单设计后的思考

更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码: https://gitee.com/nbacheng/ruoyi-nbcio 演示地址:RuoYi-Nbcio后台管理系统 更多nbcio-boot功能请看演示系统 gitee源代码地址 后端代码: https://gitee.com/nbacheng/n…

springboot整合dubbo

1、创建三个工程&#xff1a;api&#xff08;jar&#xff09;、service&#xff08;jar&#xff09;、test&#xff08;war&#xff09;。 2、img-api: package com.demo.service;import java.util.List; import com.demo.module.Img;public interface ImgService {List<Img…

CodeWave智能开发平台--03--目标:应用创建--02数据模型设计

摘要 本文是网易数帆CodeWave智能开发平台系列的第05篇&#xff0c;主要介绍了基于CodeWave平台文档的新手入门进行学习&#xff0c;实现一个完整的应用&#xff0c;本文主要完成数据模型设计 CodeWave智能开发平台的05次接触 CodeWave参考资源 网易数帆CodeWave开发者社区…

Docker 存储卷管理

一、存储卷简介 存储卷是一种方便、灵活、高效的Docker容器内数据存储方式。存储卷可以在容器内的不同进程间共享数据&#xff0c;并且可以在容器之间共享和重用。 二、存储卷的优点 可以在容器之间共享和重用&#xff0c;避免了在不同容器之间复制数据的繁琐。对数据卷的修…

QT_02 窗口属性、信号槽机制

QT - 窗口属性、信号槽机制 1. 设置窗口属性 窗口设置 1,标题 2,大小 3,固定大小 4,设置图标在 widget.cpp 文件中&#xff1a; //设置窗口大小,此时窗口是可以拉大拉小的 //1参:宽度 //2参:高度 this->resize(800, 600); //设置窗口标题 this->setWindowTitle("…

出个花活:出街&秀场丨当维乐VELO遇上英伦时尚之都

到底是谁还没有看过我们维乐坐垫今年的新花活呀&#xff0c;身边好多从前不爱运动的朋友&#xff0c;如今也沉迷上了公路车。我相信原因一定是由于对产品设计有着更高的要求&#xff0c;对于审美有着越来越高的追求&#xff0c;也是因为此大多数朋友最终都选择了维乐专业坐垫&a…

自定义页面,落地页面自由搭配

自定义页面 路径 应用 >> 新增自定义页面 功能简介 应用内新增「自定义页面」。 自定义页面是一个可以自由配置的落地页面&#xff0c;支持通过不同的入口设置连接到不同的链接地址&#xff0c;使得不同的应用资源可以根据业务场景化的展示。 使用场景&#xff1a; 一…

打造强大的Android C++工程

theme: cyanosis 好久没有写博客了&#xff0c;最近一直在做项目重构&#xff0c;动刀之深&#xff0c;让我无暇其他。今天终于告一段落了&#xff0c;就总结一下前段时间学习C时的一些开发心得吧。 因为Android系统&#x1f236;️C 语言开发的原因&#xff0c;每个 Android…

Flutter 混合开发 - aar打包

背景 项目接入 Flutter 后有两种方式&#xff0c;一种是 module 引入开发&#xff0c;一种是 aar 依赖开发。当前项目中在 Debug 阶段为了方便调试采用 module 开发&#xff0c;在发版时&#xff08;即 Release 阶段&#xff09;采用 aar 依赖引入。为了配合这种模式就需要在 …

【2023年度技术盘点】「年终盘点后端系列」探索服务架构体系的技术风向,构建微服务核心能力(升级版)

探索服务架构体系的技术风向&#xff0c;构建微服务核心能力 文章导航大纲前提背景架构未来的风向云原生化的微服务架构&#xff08;未来软件架构&#xff09;历史历代服务架构路径新时代架构预测服务架构方向—云原生化微服务云原生化微服务提升了哪些方面 云原生化微服务架构…

XV4001BC (数字输出) 车载用

XV4001BC、XV4001BD、XV4001KC和XV4001KD是车载用SPI/I2C输出接口&#xff0c;支持角速度输出、温度传感器输出以及20度倾斜实现。这些接口可适应各种汽车导航和通讯系统&#xff0c;符合AEC-Q200标准 SPI / I2C 输出接口角速度输出(16bit)、温度传感器输出(11bit)20度倾斜实现…

OpenAI ChatGPT-4开发笔记2024-04:Chat之Tool之2:multiple functions

从程序员到ai Expert 1 设定目标2 自定义function,3个3 接口。自定义function--->ChatGPT4 define function to call ChatGPT5 发起首次请求&#xff0c;告诉gpt要做什么&#xff0c;已经有哪些函数可以调动6 大结局7 参考资料 上一篇解决了调用一个函数的问题。这一篇扩展为…