Swift - 画像付きカスタムMKPointAnnotation

Question

マップビューで使用するカスタムMKPointAnnotationを作成しようとしています。それは非常に多くのAppleの写真で使用されるもののようになります。

私はそれらの位置、サーバから写真の数を取得します。次に、上記のような注釈を注釈内に表示したいとします。

私は現在、右の座標に通常のMKPointAnnotationを追加することができ、サーバーから関連する写真を取得することもできます。

私が欲しいのは、私のMKPointAnnotationをそのように見せかけることです。

私は他の答えに従ってみましたが、毎回テンプレートに画像を表示したいのでこれは少し違うと思います。

Answer 1

func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView?MKMapViewDelegateは、オーバーライドする必要がある機能です。

各アノテーションに「カスタム」ビューを提供することができます。この関数では、カスタムビュー（サブクラスMKAnnotationView）をデキューしてカスタムプロパティを設定することも、プロパティimageを持つ通常のMKAnnotationViewをデキューすることもできます。

カスタム画像を表示するようにそのプロパティを設定できます。私はむしろカスタムレイアウト（ラベル、imageViewsなど）とテーマ（色、レイヤーなど）を追加できるので、自分のannotationViewを使用したいと思います。

例：

// 
// ViewController.swift 
// Maps 
// 
// Created by Brandon T on 2017-02-20. 
// Copyright © 2017 XIO. All rights reserved. 
// 

import UIKit 
import MapKit 


class ImageAnnotation : NSObject, MKAnnotation { 
    var coordinate: CLLocationCoordinate2D 
    var title: String? 
    var subtitle: String? 
    var image: UIImage? 
    var colour: UIColor? 

    override init() { 
     self.coordinate = CLLocationCoordinate2D() 
     self.title = nil 
     self.subtitle = nil 
     self.image = nil 
     self.colour = UIColor.white 
    } 
} 

class ImageAnnotationView: MKAnnotationView { 
    private var imageView: UIImageView! 

    override init(annotation: MKAnnotation?, reuseIdentifier: String?) { 
     super.init(annotation: annotation, reuseIdentifier: reuseIdentifier) 

     self.frame = CGRect(x: 0, y: 0, width: 50, height: 50) 
     self.imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 50, height: 50)) 
     self.addSubview(self.imageView) 

     self.imageView.layer.cornerRadius = 5.0 
     self.imageView.layer.masksToBounds = true 
    } 

    override var image: UIImage? { 
     get { 
      return self.imageView.image 
     } 

     set { 
      self.imageView.image = newValue 
     } 
    } 

    required init?(coder aDecoder: NSCoder) { 
     fatalError("init(coder:) has not been implemented") 
    } 
} 

class ViewController: UIViewController, MKMapViewDelegate { 

    var mapView: MKMapView! 
    var locationManager: CLLocationManager! 

    override func viewDidLoad() { 
     super.viewDidLoad() 


     self.initControls() 
     self.doLayout() 
     self.loadAnnotations() 
    } 

    override func didReceiveMemoryWarning() { 
     super.didReceiveMemoryWarning() 
    } 

    func initControls() { 
     self.mapView = MKMapView() 

     self.mapView.isRotateEnabled = true 
     self.mapView.showsUserLocation = true 
     self.mapView.delegate = self 

     let center = CLLocationCoordinate2DMake(43.761539, -79.411079) 
     let region = MKCoordinateRegionMake(center, MKCoordinateSpanMake(0.005, 0.005)) 
     self.mapView.setRegion(region, animated: true) 
    } 

    func doLayout() { 
     self.view.addSubview(self.mapView) 
     self.mapView.leftAnchor.constraint(equalTo: self.view.leftAnchor).isActive = true 
     self.mapView.rightAnchor.constraint(equalTo: self.view.rightAnchor).isActive = true 
     self.mapView.topAnchor.constraint(equalTo: self.view.topAnchor).isActive = true 
     self.mapView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor).isActive = true 
     self.mapView.translatesAutoresizingMaskIntoConstraints = false 
    } 

    func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? { 
     if annotation.isKind(of: MKUserLocation.self) { //Handle user location annotation.. 
      return nil //Default is to let the system handle it. 
     } 

     if !annotation.isKind(of: ImageAnnotation.self) { //Handle non-ImageAnnotations.. 
      var pinAnnotationView = mapView.dequeueReusableAnnotationView(withIdentifier: "DefaultPinView") 
      if pinAnnotationView == nil { 
       pinAnnotationView = MKPinAnnotationView(annotation: annotation, reuseIdentifier: "DefaultPinView") 
      } 
      return pinAnnotationView 
     } 

     //Handle ImageAnnotations.. 
     var view: ImageAnnotationView? = mapView.dequeueReusableAnnotationView(withIdentifier: "imageAnnotation") as? ImageAnnotationView 
     if view == nil { 
      view = ImageAnnotationView(annotation: annotation, reuseIdentifier: "imageAnnotation") 
     } 

     let annotation = annotation as! ImageAnnotation 
     view?.image = annotation.image 
     view?.annotation = annotation 

     return view 
    } 


    func loadAnnotations() { 
     let request = NSMutableURLRequest(url: URL(string: "https://i.imgur.com/zIoAyCx.png")!) 
     request.httpMethod = "GET" 

     let session = URLSession(configuration: URLSessionConfiguration.default) 
     let dataTask = session.dataTask(with: request as URLRequest) { (data, response, error) in 
      if error == nil { 

       let annotation = ImageAnnotation() 
       annotation.coordinate = CLLocationCoordinate2DMake(43.761539, -79.411079) 
       annotation.image = UIImage(data: data!, scale: UIScreen.main.scale) 
       annotation.title = "Toronto" 
       annotation.subtitle = "Yonge & Bloor" 


       DispatchQueue.main.async { 
        self.mapView.addAnnotation(annotation) 
       } 
      } 
     } 

     dataTask.resume() 
    } 
} 

Answer 2

あなたは別の写真がこのコードを使用してマップの多くの場所に設定したい場合：

@Brandonを、申し訳ありませんが、私は少しだあなた

@objc func loadAnnotations() { 

    for item in locations{ 
     DispatchQueue.main.async { 
      let request = NSMutableURLRequest(url: URL(string: "<YourPictureUrl>")!) 
      request.httpMethod = "GET" 
      let session = URLSession(configuration: URLSessionConfiguration.default) 
      let dataTask = session.dataTask(with: request as URLRequest) { (data, response, error) in 
       if error == nil { 

        let annotation = ImageAnnotation() 
        annotation.coordinate = CLLocationCoordinate2DMake(Double(item["pl_lat"] as! String)!, 
                     Double(item["pl_long"] as! String)!) 
        annotation.image = UIImage(data: data!, scale: UIScreen.main.scale) 
        annotation.title = "T" 
        annotation.subtitle = "" 
        DispatchQueue.main.async { 
         self.mapView.addAnnotation(annotation) 
        } 
       } 
      } 

      dataTask.resume() 
     } 
    } 
}