进入最近很火的摩拜单车,你看到的是这样的

mobike.gif

其实很早之前百度地图和高德地图就实现了这个功能,但是他们的SDK并没有可以直接使用的属性来造福大众,想实现虽然不难,但还是要自己动手,建议官方直接加一个 isUserDirectionOpen 属性,岂不美哉!

实现这个功能说来也简单

1 获取到用户方向

2 根据方向旋转箭头

---

先做一下前期准备工作

1.新建一个swift项目,导入高德地图SDK
我用的是pods安装高德地图SDK
Podfile文件里面这样写就可以

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

2.配置工程
新建桥接文件,在桥接文件中导入相关库文件

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

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

---

1.获取设备方向

1). CoreLocation

CoreLocation里有个heading: CLHeading属性,它包含了当前的方向信息,CLHeading有三个属性,地图中自带此信息

/*
     *  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,方向可根据这三个值算出来

在高德地图的更新用户位置的代理中可以获取heading信息

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

2). CoreMotion

CoreMotion里根据deviceMotion里的attitude也可以获取方向,网上有相关教程,有兴趣的朋友可以自行百度下---详说CMDeviceMotion

2.根据方向旋转箭头

1). 用带箭头的图片替换官方的小蓝点

arrow.png

...渣图勿喷,我直接在摩拜单车截了个图用ps随便扣的,这应该不算侵权吧

在viewForAnnotation代理中替换系统视图

///返回大头针视图
    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).旋转此图片

func mapView(_ mapView: MAMapView!, didUpdate userLocation: MAUserLocation!, updatingLocation: Bool) {
        
        //取得用户大头针视图
        let userView = mapView.view(for: userLocation)
      
        //取方向信息
       let userHeading = userLocation.heading 
        
        //根据方向旋转箭头
        userView.rotateWithHeading(heading: userHeading)
        
    }

rotateWithHeading是一个MAAnnotationView的扩展

//针对MAAnnotationView的扩展
extension MAAnnotationView {
    
    /// 根据heading信息旋转大头针视图
    ///
    /// - Parameter heading: 方向信息
    func rotateWithHeading(heading: CLHeading) {
        
        //将设备的方向角度换算成弧度
        let headings = M_PI * heading.magneticHeading / 180.0
        //创建不断旋转CALayer的transform属性的动画
        let rotateAnimation = CABasicAnimation(keyPath: "transform")
        //动画起始值
        let formValue = self.layer.transform
        rotateAnimation.fromValue = NSValue(caTransform3D: formValue)
        //绕Z轴旋转heading弧度的变换矩阵
        let toValue = CATransform3DMakeRotation(CGFloat(headings), 0, 0, 1)
        //设置动画结束值
        rotateAnimation.toValue = NSValue(caTransform3D: toValue)
        rotateAnimation.duration = 0.35
        rotateAnimation.isRemovedOnCompletion = true
        //设置动画结束后layer的变换矩阵
        self.layer.transform = toValue
        
        //添加动画
        self.layer.add(rotateAnimation, forKey: nil)
        
    }
}

最后效果图

end.gif

代码已放到git上 DirectionMap

附录:其他地图原理类似,百度地图方向实现