简易绘制地图路线

当我们获取了一组地理位置后,可能会想要在地图上绘制这组地理位置信息所包含的路线。

MKMapView提供了addOverlay功能(以及addAnnotation),让我们可以在地图上放一层遮罩。如果要放一组遮罩,可以用addOverlays。

[cpp]  view plain copy
  1. #pragma mark -   
  2.   
  3. - (void)drawLineWithLocationArray:(NSArray *)locationArray  
  4. {  
  5.     int pointCount = [locationArray count];  
  6.     CLLocationCoordinate2D *coordinateArray = (CLLocationCoordinate2D *)malloc(pointCount * sizeof(CLLocationCoordinate2D));  
  7.       
  8.     for (int i = 0; i < pointCount; ++i) {  
  9.         CLLocation *location = [locationArray objectAtIndex:i];  
  10.         coordinateArray[i] = [location coordinate];  
  11.     }  
  12.       
  13.     self.routeLine = [MKPolyline polylineWithCoordinates:coordinateArray count:pointCount];  
  14.     [self.mapView setVisibleMapRect:[self.routeLine boundingMapRect]];  
  15.     [self.mapView addOverlay:self.routeLine];  
  16.       
  17.     free(coordinateArray);  
  18.     coordinateArray = NULL;  
  19. }  

MKPolyLine 为我们提供了方便绘制多条线段的功能,它实现了MKOverlay协议,但并不能作为遮罩。我们需要实现相应的遮罩代理方法:

[cpp]  view plain copy
  1. #pragma mark - MKMapViewDelegate  
  2.   
  3. - (MKOverlayView *)mapView:(MKMapView *)mapView viewForOverlay:(id<MKOverlay>)overlay  
  4. {  
  5.     if(overlay == self.routeLine) {  
  6.         if(nil == self.routeLineView) {  
  7.             self.routeLineView = [[[MKPolylineView alloc] initWithPolyline:self.routeLine] autorelease];  
  8.             self.routeLineView.fillColor = [UIColor redColor];  
  9.             self.routeLineView.strokeColor = [UIColor redColor];  
  10.             self.routeLineView.lineWidth = 5;  
  11.         }  
  12.         return self.routeLineView;  
  13.     }  
  14.     return nil;  
  15. }  

下面是我的测试代码,用北京的经纬度和杭州的经纬度画线:

[cpp]  view plain copy
  1. - (void)drawTestLine  
  2. {  
  3.     CLLocation *location0 = [[CLLocation alloc] initWithLatitude:39.954245 longitude:116.312455];  
  4.     CLLocation *location1 = [[CLLocation alloc] initWithLatitude:30.247871 longitude:120.127683];  
  5.     NSArray *array = [NSArray arrayWithObjects:location0, location1, nil];  
  6.     [self drawLineWithLocationArray:array];  
  7. }  
UniApp是一个基于Vue.js的跨平台框架,用于快速构建原生应用。要在UniApp中绘制地图路线,通常会借助第三方的地图API,如高德地图(AMap)或腾讯地图。 以下是在UniApp中使用高德地图绘制路线的基本步骤: 1. **引入地图组件**: 首先,你需要安装官方提供的`@dcloudio/uni-map`组件库,并在项目中引用它。 ```javascript // 在main.js中注册组件 import { Map, Marker } from '@dcloudio/uni-map' Vue.component('map', Map) Vue.component('marker', Marker) ``` 2. **初始化地图**: 创建一个新的Map实例并设置其位置和大小。你可以设置中心点、缩放级别等参数。 ```javascript <template> <view> <map :center="center" :zoom="zoomLevel"> <!-- 其他地图内容 --> </map> </view> </template> <script> export default { data() { return { center: [116.404, 39.915], // 北京坐标 zoomLevel: 12, } }, } </script> ``` 3. **添加路径**: 使用`AMap.Marker`表示路径上的标记点,然后通过`AMap.Autocomplete`获取输入地址后计算路线。例如: ```javascript <template> <view> <map :center="center" :zoom="zoomLevel"> <amap-autocomplete placeholder="请输入起点" @select="getRoute"></amap-autocomplete> <map-polyline :path="routePoints" :stroke-width="8" stroke-color="#FF0000"></map-polyline> <amarker v-for="(point, index) in routePoints" :position="point" /> </map> </view> </template> <script> import AMap from '@dcloudio/uni-map/dist/amap' AMap.initAMapApiLoader({ key: 'your_map_api_key', plugin: ['AMap.Geolocation', 'AMap.Scale', 'AMap.Polyline'], }) export default { methods: { getRoute(e) { const start = e.result; // 调用高德地图API计算路线 AMap.Autocomplete.prototype.calculateRoute(start, end, (status, result) => { if (status === 'complete') { this.routePoints = result.routes.points; // 存储路线点 } }); }, }, } </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值