進(jìn)入最近很火的摩拜單車,你看到的是這樣的

mobike.gif

其實(shí)很早之前百度地圖和高德地圖就實(shí)現(xiàn)了這個(gè)功能,但是他們的SDK并沒(méi)有可以直接使用的屬性來(lái)造福大眾,想實(shí)現(xiàn)雖然不難,但還是要自己動(dòng)手,建議官方直接加一個(gè) isUserDirectionOpen 屬性,豈不美哉!

實(shí)現(xiàn)這個(gè)功能說(shuō)來(lái)也簡(jiǎn)單

1 獲取到用戶方向

2 根據(jù)方向旋轉(zhuǎn)箭頭

先做一下前期準(zhǔn)備工作

1.新建一個(gè)swift項(xiàng)目,導(dǎo)入高德地圖SDK
我用的是pods安裝高德地圖SDK
Podfile文件里面這樣寫就可以

platform :ios, "8.0"
use_frameworks!
target :'RotateArrow' do
pod 'AMap3DMap'
end

2.配置工程
新建橋接文件,在橋接文件中導(dǎo)入相關(guān)庫(kù)文件

#import <AMapFoundationKit/AMapFoundationKit.h>
#import <MAMapKit/MAMapKit.h>

在plist中添加鍵值
Privacy - Location When In Use Usage Description
和
App Transport Security Settings 的 Allow Arbitrary Loads

1.獲取設(shè)備方向

1). CoreLocation

CoreLocation里有個(gè)heading: CLHeading屬性,它包含了當(dāng)前的方向信息,CLHeading有三個(gè)屬性,地圖中自帶此信息

/*
     *  x
     *  
     *  Discussion:
     *    Returns a raw value for the geomagnetism measured in the x-axis.
     *
     */
    open var x: CLHeadingComponentValue { get }

    
    /*
     *  y
     *  
     *  Discussion:
     *    Returns a raw value for the geomagnetism measured in the y-axis.
     *
     */
    open var y: CLHeadingComponentValue { get }

    
    /*
     *  z
     *  
     *  Discussion:
     *    Returns a raw value for the geomagnetism measured in the z-axis.
     *
     */
    open var z: CLHeadingComponentValue { get }

以上摘自官方API,方向可根據(jù)這三個(gè)值算出來(lái)

在高德地圖的更新用戶位置的代理中可以獲取heading信息

func mapView(_ mapView: MAMapView!, didUpdate userLocation: MAUserLocation!, updatingLocation: Bool) {
      let heading = userLocation.heading     
}

2). CoreMotion

CoreMotion里根據(jù)deviceMotion里的attitude也可以獲取方向,網(wǎng)上有相關(guān)教程,有興趣的朋友可以自行百度下---詳說(shuō)CMDeviceMotion

2.根據(jù)方向旋轉(zhuǎn)箭頭

1). 用帶箭頭的圖片替換官方的小藍(lán)點(diǎn)

arrow.png

...渣圖勿噴,我直接在摩拜單車截了個(gè)圖用ps隨便扣的,這應(yīng)該不算侵權(quán)吧

在viewForAnnotation代理中替換系統(tǒng)視圖

///返回大頭針視圖
    func mapView(_ mapView: MAMapView!, viewFor annotation: MAAnnotation!) -> MAAnnotationView! {
        if annotation is MAUserLocation {
            var userView = mapView.dequeueReusableAnnotationView(withIdentifier: userAnnotationIdentifer)
            if userView == nil {
                userView = MAAnnotationView(annotation: annotation, reuseIdentifier: userAnnotationIdentifer)
            }
            userView!.image = UIImage(named: "arrow")
            return userView!
        }
        return nil
    }

IMG_1433.PNG

2).旋轉(zhuǎn)此圖片

func mapView(_ mapView: MAMapView!, didUpdate userLocation: MAUserLocation!, updatingLocation: Bool) {
        
        //取得用戶大頭針視圖
        let userView = mapView.view(for: userLocation)
      
        //取方向信息
       let userHeading = userLocation.heading 
        
        //根據(jù)方向旋轉(zhuǎn)箭頭
        userView.rotateWithHeading(heading: userHeading)
        
    }

rotateWithHeading是一個(gè)MAAnnotationView的擴(kuò)展

//針對(duì)MAAnnotationView的擴(kuò)展
extension MAAnnotationView {
    
    /// 根據(jù)heading信息旋轉(zhuǎn)大頭針視圖
    ///
    /// - Parameter heading: 方向信息
    func rotateWithHeading(heading: CLHeading) {
        
        //將設(shè)備的方向角度換算成弧度
        let headings = M_PI * heading.magneticHeading / 180.0
        //創(chuàng)建不斷旋轉(zhuǎn)CALayer的transform屬性的動(dòng)畫(huà)
        let rotateAnimation = CABasicAnimation(keyPath: "transform")
        //動(dòng)畫(huà)起始值
        let formValue = self.layer.transform
        rotateAnimation.fromValue = NSValue(caTransform3D: formValue)
        //繞Z軸旋轉(zhuǎn)heading弧度的變換矩陣
        let toValue = CATransform3DMakeRotation(CGFloat(headings), 0, 0, 1)
        //設(shè)置動(dòng)畫(huà)結(jié)束值
        rotateAnimation.toValue = NSValue(caTransform3D: toValue)
        rotateAnimation.duration = 0.35
        rotateAnimation.isRemovedOnCompletion = true
        //設(shè)置動(dòng)畫(huà)結(jié)束后layer的變換矩陣
        self.layer.transform = toValue
        
        //添加動(dòng)畫(huà)
        self.layer.add(rotateAnimation, forKey: nil)
        
    }
}

最后效果圖

end.gif

代碼已放到git上 DirectionMap

附錄:其他地圖原理類似,百度地圖方向?qū)崿F(xiàn)