开始用Swift开发iOS 10 - 15 使用地图

继续上一盘开始用Swift开发iOS 10 - 14 基础动画,模糊效果和Unwind Segue,这一篇使用地图。
添加MapKit框架:

添加Map到应用中

效果图如下:

  • Detail view的table view底部添加一个Map View。高度设置为135,取消一些属性zooming, scrolling, rotating等,使地图没有交互功能。
  • 删除之前去掉table view底部的代码,让底部显示。
    tableView.tableFooterView = UIView(frame: CGRect.zero)

  • 添加新的视图控制器,并在其中添加Map View,调整大小为全屏。

  • control-drag从detail视图控制器到新的地图视图控制器,选择show。因为table view的头部和底部是不能选择的,所有不能从table view的底部control-drag到地图视图控制器。

  • 为了能检测的table view底部map的是否被接触,需要为地图添加UITapGestureRecognizer
    RestaurantDetailViewController.swift中引入 import MapKit;
    定义地图接口@IBOutlet var mapView: MKMapView!,并关联;
    viewDidLoad中添加:
        let tapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(showMap))
        mapView.addGestureRecognizer(tapGestureRecognizer)

另外添加方法:

func showMap() {
    performSegue(withIdentifier: "showMap", sender: self)
}

用Geocoder转换地址到经纬度

类似下面:

let geoCoder = CLGeocoder()
geoCoder.geocodeAddressString("上海东方明珠", completionHandler: {
    placemarks, error in
    for p in placemarks! {
        print(p.location?.coordinate)
    }
})    

placemarksCLPlacemark的数组。

地图标注(annotation)介绍

通过地址文本获得经纬度后就可在地图上标注指示,类似下面的样子:

地图标注的代码一般如下,先通过地址文本生成的经纬度,规定MKPointAnnotation的经纬度,然后把MKPointAnnotation添加到地图视图中即可。

let annotation = MKPointAnnotation()
if let location = placemark.location {
    annotation.coordinate = location.coordinate
    mapView.addAnnotation(annotation)
}

为没有交互的地图添加标注

RestaurantDetailViewController.swiftviewDidLoad中添加:

let geoCoder = CLGeocoder()
geoCoder.geocodeAddressString(restaurant.location, completionHandler: {
    placemarks, error in
    if error != nil {
        print(error)
        return
    }
    if let placemarks = placemarks {
        
        let placemark = placemarks[0]
        
        let annotation = MKPointAnnotation()
        
        if let location = placemark.location {
            annotation.coordinate = location.coordinate
            self.mapView.addAnnotation(annotation)
            // 规定地图显示半径 250米
            let region = MKCoordinateRegionMakeWithDistance(annotation.coordinate, 250, 250)
            self.mapView.setRegion(region, animated: false)
        }
    }
})

为全屏的地图添加标注

  • 新建一个视图控制器MapViewController,关联全屏地图控制器,引入地图框架 import MapKit
  • 第一个地图接口和restaurant变量
@IBOutlet var mapView: MKMapView!
var restaurant:Restaurant!
  • 更新viewDidLoad
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let geoCoder = CLGeocoder()
        geoCoder.geocodeAddressString(restaurant.location, completionHandler: {
            placemarks, error in
            if error != nil {
                print(error)
                return
            }
            if let placemarks = placemarks {
                // Get the first placemark
                let placemark = placemarks[0]
                // 1
                let annotation = MKPointAnnotation()
                annotation.title = self.restaurant.name
                annotation.subtitle = self.restaurant.type
                if let location = placemark.location {
                    annotation.coordinate = location.coordinate
                    // 2
                    self.mapView.showAnnotations([annotation], animated: true)
                    self.mapView.selectAnnotation(annotation, animated: true)
                }
            }
        })
    }
  • 1 设置MKPointAnnotation一些属性
  • 2 在地图展示标注。地图上课展示很多标注。selectAnnotation:方法是标注显示被选中的样式。

在标注中添加图片

  • MapViewController实现MKMapViewDelegate协议,并在viewDidLoad中设置mapView.delegate = self
  • 添加mapView(_:viewFor:)方法,当地图每次需要annotation时调用:
    func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
        let identifier = "MyPin"
        // 1
        if annotation.isKind(of: MKUserLocation.self) {
            return nil
        }
        // 2
        var annotationView: MKPinAnnotationView? = mapView.dequeueReusableAnnotationView(withIdentifier: identifier) as? MKPinAnnotationView
        
        if annotationView == nil {
            annotationView = MKPinAnnotationView(annotation: annotation, reuseIdentifier: identifier)
            annotationView?.canShowCallout = true
        }
        // 3
        let leftIconView = UIImageView(frame: CGRect(x: 0, y: 0, width: 53, height: 53))
        leftIconView.image = UIImage(named: restaurant.image)
        annotationView?.leftCalloutAccessoryView = leftIconView
        // 4
        annotationView?.pinTintColor = UIColor.orange

        return annotationView
    }
  • 1 判断是否用户当前位置。用户当前位置算是一种特殊的标注,是当前位置,就不需要另外添加标注了。
  • 2 创建MKPinAnnotationView。有点类似创建table view cell。
  • 3 在MKPinAnnotationView上添加图片。
  • 4 改变标注针的颜色。

地图定制

    mapView.showsCompass = true
    mapView.showsScale = true
    mapView.showsTraffic = true

showsCompass表示在右上角显示罗盘。
showsScale 表示在左上角显示缩放比例尺。
showsTraffic表示显示交通信息。

代码

Beginning-iOS-Programming-with-Swift

说明

此文是学习appcode网站出的一本书 《Beginning iOS 10 Programming with Swift》 的一篇记录

系列文章目录

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,298评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,701评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,078评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,687评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,018评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,410评论 1 211
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,729评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,412评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,124评论 1 239
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,379评论 2 242
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,903评论 1 257
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,268评论 2 251
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,894评论 3 233
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,014评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,770评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,435评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,312评论 2 260

推荐阅读更多精彩内容