实现物流场景中小车Marker指向目的地

以下内容转载自面糊的文章《实现物流场景的小车Marker指向目的地》

作者：面糊

链接：https://www.jianshu.com/p/f794b02a81f5

来源：简书

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

场景需求

快递物流相关APP中，如快递、送餐，可以让快递车Marker的车头，在途经点始终指向目的地，如下图所示：

使用技术：腾讯地图iOS SDK，点标记和绘制线

核心点：

1、操作QPointAnnotation的坐标

2、从mapView中获取途经点QPointAnnotation的坐标

3、通过三角函数计算途经点坐标与终点坐标的角度

4、操作QAnnotationView的transform属性

代码示例如下：

1、示例展示福州送至北京，途径西安、西宁、济南、太原、天津，先将这几个点的maker添加到地图中：

// 福州
locations[0] = CLLocationCoordinate2DMake(26.101797,119.415539);
// 西安
locations[1] = CLLocationCoordinate2DMake(34.475422,109.0005);
// 西宁
locations[2] = CLLocationCoordinate2DMake(36.69099,101.749523);
// 济南
locations[3] = CLLocationCoordinate2DMake(36.761434,117.174328);
// 太原
locations[4] = CLLocationCoordinate2DMake(37.949064,112.56007);
// 天津
locations[5] = CLLocationCoordinate2DMake(39.117802,117.174328);
// 北京
locations[6] = CLLocationCoordinate2DMake(39.897614,116.383312);// 福州
QPointAnnotation *nnAnnotation = [[QPointAnnotation alloc] init];
nnAnnotation.coordinate = locations[0];
[self.mapView addAnnotation:nnAnnotation];....

2、添加小车marker，以福州为起始点：

_carAnnotation = [[QPointAnnotation alloc] init];
_carAnnotation.coordinate = locations[0];
// 指定userData自定义数据，用于判断marker的类型
_carAnnotation.userData = @"car";
[self.mapView addAnnotation:_carAnnotation];

3、实现mapView代理方法，根据userData来区分不同的Marker

- (QAnnotationView *)mapView:(QMapView *)mapView viewForAnnotation:(id<QAnnotation>)annotation {static NSString *reuse = @"annotation";static NSString *reuseCar = @"annotationCar";QPinAnnotationView *annotationView = (QPinAnnotationView *)[mapView dequeueReusableAnnotationViewWithIdentifier:reuse];if (annotationView == nil) {if (annotation == _carAnnotation) {annotationView = [[QPinAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:reuseCar];annotationView.image = [UIImage imageNamed:@"car"];// 将小车的AnnotationView保存为属性，用于操作转向_carAnnotationView = annotationView;} else {annotationView = [[QPinAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:reuse];}}return annotationView;
}

4、根据三角函数，计算起点和终点的角度，并调整小车Marker的角度

- (void)annotationRotate {// 取出终点坐标位置CLLocationCoordinate2D toCoord = _bjAnnotation.coordinate;double fromLat = _carAnnotation.coordinate.latitude;double fromlon = _carAnnotation.coordinate.longitude;double toLat = toCoord.latitude;double tolon = toCoord.longitude;double slope = ((toLat - fromLat) / (tolon - fromlon));double radio = atan(slope);double angle = 180 * (radio / M_PI);if (slope > 0) {if (tolon < fromlon) {angle = -90 - angle;} else {angle = 90 - angle;}} else if (slope == 0) {if (tolon < fromlon) {angle = -90;} else {angle = 90;}} else {if (toLat < fromLat) {angle = 90 - angle;} else {angle = -90 - angle;}}// 这里要注意，计算出来的是角度，而旋转则需要先转换为弧度_carAnnotationView.transform = CGAffineTransformMakeRotation((M_PI * (angle) / 180.0));
}

在这个基础上，我在navigationItem中添加了一个切换当前途径点的功能，每次点击按钮就会将小车移动到下一个途经点，示例代码如下：

- (void)handleTestAction {_index++;if (_index == self.mapView.annotations.count - 2) {_index = 0;}QPointAnnotation *annotation = self.mapView.annotations[_index];_carAnnotation.coordinate = annotation.coordinate;[self annotationRotate];
}

效果示例如下图所示：

实现物流场景中小车Marker指向目的地相关推荐

ZETA与RFID在供应链物流场景中是否可以互补？
物联网是一个场景应用多样化.碎片化的市场,目前还没有哪一种技术可以满足所有的需求.因此,我们可以看到ZETA等低功耗广域网(LPWAN)技术,正在大量以RFID.蓝牙.WiFi.ZigBee等短距离通 ...
JS 中 this 的指向
为什么要使用this? 解决的问题? 可以先通过一个例子了解下 function speak(){var name = this.nameconsole.log("Hello I am -- ...
理解js中的this指向以及call，apply，bind方法
<script> function a(){var user = "追梦子";console.log(this.user); //undefinedconsole.lo ...
深入理解call、apply、bind（改变函数中的this指向）
在JavaScript中call.apply.bind是Function 对象自带的三个方法,这三个方法的主要作用是改变函数中的 this 指向,从而可以达到`接花移木`的效果.本文将对这三个方法进行 ...
在场景中添加光线——添加HLSL Vertex Shading
问题使用你配置好的光照,BasicEffect可以很好地绘制场景.但是,如果你想定义一些更酷的效果,首先要实现的就是正确的光照. 本教程中,你将学习如何编写一个基本的HLSL effect实现逐顶点 ...
混合列压缩(HCC)在OLAP及OLTP场景中的测试
作者:李敏,云和恩墨交付工程师. 2019年度 ACOUG活动启动啦!为了感恩和回馈一直支持社区工作的技术爱好者.会员.嘉宾和合作伙伴,2019年度,我们汇集了行业大咖最新的精彩主题跟大家分享,更有惊 ...
JavaScript中this的指向问题及面试题你掌握了吗？
this 作为JavaScript中的一个关键字,它的复杂度很高,主要原因是它所处不同场景的代表的指向是不一样的.这里先做一个结论,重要事情说三遍: this的指向是由上下文环境动态决定的 this的 ...
ocx控件 postmessage消息会消失_通过HackerOne漏洞报告学习PostMessage漏洞实战场景中的利用与绕过...
0x00 前言这是一篇关于postMessage漏洞分析的文章,主要通过hackerone平台披露的Bug Bounty报告,学习和分析postMessage漏洞如何在真实的场景中得到利用的. 0x ...
美团知识图谱问答技术及在商家推荐回复场景中的实践与探索
猜你喜欢 0.电商知识图谱的构建及在搜索推荐场景的应用实践1.如何搭建一套个性化推荐系统?2.内容推荐策略产品经理的方法与实践3.京东推荐算法精排技术实践4.微博推荐算法实践与机器学习平台演进5.腾讯 ...

实现物流场景中小车Marker指向目的地

场景需求

实现物流场景中小车Marker指向目的地相关推荐

最新文章

热门文章