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

news2024/11/27 12:39:06

一、前言

  • 一旦将 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 mapScope

  var 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.coloradmin.cn/o/1357195.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Unity 使用 Plastic 同步后,正常工程出现错误

class Newtonsoft.Json.Linq.JToken e CS0433:类型"JToken"同时存在于"Newtonsoft.Json.Net20,Version3.5.0.0,Cultureneutral,,PublicKeyToken30ad4fe6b2a6aeed"和"Newtonsoft.Json, Version12.0.0.0,Cultureneutral,PublicKeyToken30ad4fe6b2a6aeed…

【React系列】Hook(二)高级使用

本文来自#React系列教程:https://mp.weixin.qq.com/mp/appmsgalbum?__bizMzg5MDAzNzkwNA&actiongetalbum&album_id1566025152667107329) 一. Hook高级使用 1.1. useReducer 很多人看到useReducer的第一反应应该是redux的某个替代品,其实并不是…

React实现简单登录

一 实现效果(样式是之前设置的) 二 具体实现代码 2.1 Login.js import {useNavigate} from "react-router-dom"; import React from "react"; // import ./style2.cssfunction Login(){const navigateuseNavigate()func…

【数据结构】二叉树(二)——顺序结构

前言 本篇博客讲解数组实现二叉树的顺序结构 文章目录 一、二叉树的顺序结构及实现1.1 二叉树的顺序结构1.2 堆的概念1.3 堆的实现1.3.1 初始化堆1.3.2 向堆中插入元素1.3.3 从堆顶删除1.3.4 其他操作1.3.5 完整代码Heap.hHeap.c 1.4 堆的应用1.4.1 堆排序1.4.2 TOP-K问题 一、…

关于“Python”的核心知识点整理大全61

目录 注意 20.1.4 使用 jumbotron 设置主页的样式 index.html 20.1.5 设置登录页面的样式 login.html 20.1.6 设置 new_topic 页面的样式 new_topic.html 20.1.7 设置 topics 页面的样式 topics.html 元素,让它们在页面上显得大些(见2&#xf…

Unity SRP 管线【第五讲:自定义烘培光照】

文章目录 一、自定义烘培光照1. 烘培光照贴图2. 获取光照贴图3. 获取物体在光照贴图上的UV坐标4. 采样光照贴图 二、自定义光照探针三、 Light Probe Proxy Volumes(LPPV)四、Meta Pass五、 自发光烘培 一、自定义烘培光照 细节内容详见catlikecoding.c…

RedHat8、Centos8无法启动网卡解决方案,网卡未加入托管

只针对部分情况,网卡未加入托管导致 虚拟机开启 ifconfig 没有ens33网卡,无法上网 手动启动网卡提示 Connection ens33 is not available on device ens33 because device is strictly unmanaged使用nmtui配置IP信息,无法启动’ens160’网卡…

AI实景无人直播创业项目:开启自动直播新时代,一部手机即可实现增长

在当今社会,直播已经成为了人们日常生活中不可或缺的一部分。无论是商家推广产品、明星互动粉丝还是普通人分享生活,直播已经渗透到了各行各业。然而,传统直播方式存在着一些不足之处,如需现场主持人操作、高昂的费用等。近年来&a…

新一代爬取JavaScript渲染页面的利器-playwright(一)

Playwright的使用 Playwright是微软在2020年初开源的一款新一代自动化测试工具,其功能和**Selenium**、Pyppeteer类似,都可以驱动浏览器进行自动化操作,但是也具备了Selenium、Pyppeteer不具备的更好的API,是新一代爬取JavaScrip渲…

Vue3集成scss实现清除浏览器默认样式

1.首先去npm官网找到对应的reset.scss文件,复制内容在本地src下style建一个一模一样的文件,内容复制进去npm | Home 2.在style文件夹下再建一个index.scss文件,在它里边引入刚刚建好的reset.scss文件,如下 import ./reset.scss; …

线程的基础

文章目录 线程的介绍:创建线程的三种方式:一、继承Thread二、实现Runnable接口三、实现Callable接口 线程的优先级:多线程:线程终止:线程常用方法:用户线程和守护线程线程的生命周期:Synchroniz…

Spring见解 1.2

2.3.Spring的IOC解决程序耦合 2.3.1.创建工程 2.3.1.1.pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:sc…

Android studio VideoView 应用设计

一、运行效果&#xff1a; 二、新建empty activity项目&#xff1a; 三、打开activity_main.xml布局文件&#xff0c;添加VideoView&#xff1a; <VideoViewandroid:id"id/videoView"android:layout_width"368dp"android:layout_height"573dp&quo…

flink table view datastream互转

case class outer(f1:String,f2:Inner) case class outerV1(f1:String,f2:Inner,f3:Int) case class Inner(f3:String,f4:Int) 测试代码 package com.yy.table.convertimport org.apache.flink.streaming.api.scala.StreamExecutionEnvironment import org.apache.flink.tabl…

canvas绘制直角梯形(向左)

查看专栏目录 canvas示例教程100专栏&#xff0c;提供canvas的基础知识&#xff0c;高级动画&#xff0c;相关应用扩展等信息。canvas作为html的一部分&#xff0c;是图像图标地图可视化的一个重要的基础&#xff0c;学好了canvas&#xff0c;在其他的一些应用上将会起到非常重…

visual studio 2022在查找和替换使用正则表达式查找if()

文件内容如下&#xff1a; using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks;namespace ConsoleApp1 {internal class Program{static void Main(string[] args){TempFunction();}private static void T…

初识Web服务器

一、web服务器 1、什么是web服务器&#xff1f; web服务器就是web项目的容器&#xff0c;我们将开发好的web项目部署到web容器中&#xff0c;才能使用网络中的用户通过浏览器进行访问。 一张图带你了解web服务器有啥作用&#xff1a; 在我的电脑上有一个已经做好的项目&#…

【Python学习】Python学习1

目录 【Python学习】Python学习1 1.前言2.Python安装3.PyCharm安装4.PyCharm插件推荐5.参考 文章所属专区 Python学习 1.前言 Python 是一种解释型、面向对象、动态数据类型的高级程序设计语言。Python 由 Guido van Rossum 于 1989 年底发明&#xff0c;第一个公开发行版发…

如何借助于AI自研一款换脸app

文章目录 背景涉及的关键技术解析技术流程详解后续待补充 背景 在当今的数字时代&#xff0c;人工智能&#xff08;AI&#xff09;技术已经深入到各个领域&#xff0c;其中之一就是换脸技术。现在&#xff0c;有一个免费的AI换脸应用程序&#xff0c;可以让用户轻松地将自己的…

CTF数据分析题详解

目录 题目一(1.pcap) 题目二(2.pcap) 题目三(3.pcap) 题目四(4.pcap) CTF流量分析经典例题详解-CSDN博客 本文章涉及的所有题目附件下载地址&#xff1a; 链接&#xff1a; https://pan.baidu.com/s/18mWo5vn1zp_XbmcQrMOKRA 提取码&#xff1a;hrc4 声明&#xff1a;这里…