之前做过android地图开发，在自己的APP里集成第三方的地图sdk(百度，高德，腾讯，搜狗等)，来实现导航，基于LBS周边搜索，定位，路线规划等功能需求，这种方法比较麻烦。同时还增加了app的体积，还有如果这个第三方地图软件的sdk更新了，那你自己的app还的做相应的更新，在react-native这种方法估计也可以，但是没去尝试，因为需求简单，就是实现导航，所以就用了接下来介绍这种方法，直接用url跳转到第三放的地图软件来导航，但首先要检测这个第三方的app有没有安装，没安装当然就不显示。目前只检测市场主流的几款地图app(百度地图，高德地图，腾讯地图，ios的苹果地图)
相关的参数要求：
苹果地图：具体的地址
高德地图：具体的地址，经纬度
百度地图：具体的地址，
腾讯地图：具体的地址，经纬度
总结下来，要实现这种跳转导航，必须要把地址经纬度都传过去。
效果图：
1 ios集成方法@H_301_34@
1)新建一个react-native项目，用xcode打开,同时添加白名单
2)项目目录下新建一个class，命名为UtilMap，如图
3)编写UtilMap.m
#import "UtilMap.h"
#import <CoreLocation/CoreLocation.h>
#import <MapKit/MapKit.h>
@implementation UtilMap
RCT_EXPORT_MODULE();
RCT_EXPORT_METHOD(addEvent:(NSString *)name url:(NSString *)url lon:(NSString *)lon lat:(NSString *) lat address:(NSString*) address)
{
RCTLogInfo(@"地图app=== %@ url %@-----经度:%@------纬度:%@------地址:%@",name,url,lon,lat,address);
if ([url isEqualToString : @"ios"]) {
[self appleMap:lon andB:lat andC:address];
}else{
[[UIApplication sharedApplication] openURL:[NSURL URLWithString:url]];
}
}
RCT_EXPORT_METHOD(findEvents:(NSString *)lon lat:(NSString *)lat address:(NSString*)address resolver:(RCTResponseSenderBlock)callback)
{
NSMutableArray *maps = [NSMutableArray array];
//苹果地图
if ([[UIApplication sharedApplication]canOpenURL:[NSURL URLWithString:@"http://maps.apple.com/"]]) {
NSMutableDictionary *iosMapDic = [NSMutableDictionary dictionary];
iosMapDic[@"title"] = @"苹果地图";
iosMapDic[@"url"] = @"ios";
[maps addObject:iosMapDic];
}
//百度地图
if ([[UIApplication sharedApplication] canOpenURL:[NSURL URLWithString:@"baidumap://"]]) {
NSMutableDictionary *baiduMapDic = [NSMutableDictionary dictionary];
baiduMapDic[@"title"] = @"百度地图";
NSString *urlString = [[NSString stringWithFormat:@"baidumap://map/direction?origin={{我的位置}}&destination=name=%@&mode=driving&coord_type=gcj02",address] stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
baiduMapDic[@"url"] = urlString;
[maps addObject:baiduMapDic];
}
//高德地图
if ([[UIApplication sharedApplication] canOpenURL:[NSURL URLWithString:@"iosamap://"]]) {
NSMutableDictionary *gaodeMapDic = [NSMutableDictionary dictionary];
gaodeMapDic[@"title"] = @"高德地图";
NSString *urlString = [[NSString stringWithFormat:@"iosamap://navi?sourceApplication=%@&backScheme=%@&lat=%f&lon=%f&dev=0&style=2",@"导航功能",@"nav123456",[lat doubleValue],[lon doubleValue]] stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
gaodeMapDic[@"url"] = urlString;
[maps addObject:gaodeMapDic];
}
//腾讯地图
if ([[UIApplication sharedApplication] canOpenURL:[NSURL URLWithString:@"qqmap://"]]) {
NSMutableDictionary *qqMapDic = [NSMutableDictionary dictionary];
qqMapDic[@"title"] = @"腾讯地图";
NSString *urlString = [[NSString stringWithFormat:@"qqmap://map/routeplan?from=我的位置&type=drive&tocoord=%f,%f&to=%@&coord_type=1&policy=0",[lon doubleValue],address] stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
qqMapDic[@"url"] = urlString;
[maps addObject:qqMapDic];
}
NSMutableDictionary *cancalMapDic = [NSMutableDictionary dictionary];
cancalMapDic[@"title"] = @"取消";
[maps addObject:cancalMapDic];
// RCTLogInfo(@"地图app===经度:",maps);
callback(@[maps]);
}
//苹果地图
//跳转到苹果自带地图
- (void)appleMap:(NSString*)lon andB:(NSString*)lat andC:(NSString*)address{
RCTLogInfo(@"地图app===经度:%@------纬度:%@------地址:%@",address);
// MKMapItem *currentLoc = [MKMapItem mapItemForCurrentLocation];
//
// MKMapItem *toLocation = [[MKMapItem alloc] initWithPlacemark:[[MKPlacemark alloc] initWithCoordinate:CLLocationCoordinate2DMake([lat doubleValue],[lon doubleValue]) addressDictionary:nil]];
//
// MKMapItem *aaa = [[MKMapItem alloc] initWithPlacemark:[[MKPlacemark alloc] initWithCoordinate:CLLocationCoordinate2DMake([lat doubleValue],[lon doubleValue]) addressDictionary:nil]];
//
// NSArray *items = @[currentLoc,toLocation];
// NSDictionary *dic = @{
// MKLaunchOptionsDirectionsModeKey : MKLaunchOptionsDirectionsModeDriving,// MKLaunchOptionsMapTypeKey : @(MKMapTypeStandard),// MKLaunchOptionsShowsTrafficKey : @(YES)
// };
// [MKMapItem openMapsWithItems:items launchOptions:dic];
//MKMapItem 使用场景: 1. 跳转原生地图 2.计算线路
MKMapItem *currentLocation = [MKMapItem mapItemForCurrentLocation];
//地理编码器
CLGeocoder *geocoder = [[CLGeocoder alloc] init];
//我们假定一个终点坐标，测试地址:121.226669,31.998277
[geocoder geocodeAddressString:address completionHandler:^(NSArray<CLPlacemark *> * _Nullable placemarks,NSError * _Nullable error) {
CLPlacemark *endPlacemark = placemarks.lastObject;
RCTLogInfo(@"Longitude = %f",endPlacemark.location.coordinate.longitude);
RCTLogInfo(@"Latitude = %f",endPlacemark.location.coordinate.latitude);
//创建一个地图的地标对象o
MKPlacemark *endMKPlacemark = [[MKPlacemark alloc] initWithPlacemark:endPlacemark];
//在地图上标注一个点(终点)
MKMapItem *endMapItem = [[MKMapItem alloc] initWithPlacemark:endMKPlacemark];
//MKLaunchOptionsDirectionsModeKey 指定导航模式
//NSString * const MKLaunchOptionsDirectionsModeDriving; 驾车
//NSString * const MKLaunchOptionsDirectionsModeWalking; 步行
//NSString * const MKLaunchOptionsDirectionsModeTransit; 公交
[MKMapItem openMapsWithItems:@[currentLocation,endMapItem]
launchOptions:@{MKLaunchOptionsDirectionsModeKey: MKLaunchOptionsDirectionsModeDriving,MKLaunchOptionsShowsTrafficKey: [NSNumber numberWithBool:YES]}];
}];
}
@end
具体什么意思，请看react-native 的官网及相关的ios地图原生开发
