標籤:調用 canopen div html message mes json can 常量
需求描述
項目中,要求接入導航功能,包括“百度map、高德map”。
方案分析原生開發角度分析
從原生開發的角度分析的話,常規的思路可能是
- 分別取百度、高德官網,下載對應的SDK然後整合到本地;
- 建立對應的MapView,參照文檔完成導航功能;
- MapView對外開放參數,由調用者傳入,MapView內部利用參數,最終實現導航
- MapView提供【退出】操作
也可以是這樣
- 分別取百度、高德官網,查看調起“百度地圖APP、高德地圖APP”的方法;
- 建立MapViewTools工具類,參照文檔寫好調用方法;
- MapViewTools對外開放參數,由調用者傳入,MapViewTools內部使用參數,最終調起地圖APP,實現導航;
RN開發角度分析
如果是SDK方式整合的話,首先需要native原生整合,然後編寫RN視圖組件,最後回到RN工程完成調用。
- 好處:從此以後有了地圖輪子;
- 壞處:需要跟隨官方地圖進行大版本的升級維護,此外APP體積會變大
如果是調起APP方式整合的話,還是需要native提供方法,然後編寫RN介面組件,最後回到RN工程完成調用。
- 好處:從此以後有了地圖輪子,APP體積幾乎不變,也不用過多的關心官方版本,除非參數發生了變化;
- 壞處:兩個APP來回切換,體驗上會有那麼一丟丟的不連貫
結論:採用調起APP的方式進行整合
整合過程(iOS)建立RN介面組件NRJMap介面一:擷取可用的導航方式
RCT_EXPORT_METHOD(getAvailableMapNames:(RCTResponseSenderBlock)callback){ BOOL isBaiduMap = [[UIApplication sharedApplication] canOpenURL:[NSURL URLWithString:@"baidumap://"]]; BOOL isAMap = [[UIApplication sharedApplication] canOpenURL:[NSURL URLWithString:@"iosamap://"]]; NSMutableDictionary *result = [NSMutableDictionary dictionaryWithCapacity:2]; if (isBaiduMap) { [result setValue:@"百度地圖" forKey:kBaiduMap]; } if (isAMap) { [result setValue:@"高德地圖" forKey:kGaodeMap]; } dispatch_async(dispatch_get_main_queue(), ^{ callback(@[[result mj_JSONString]]); });}
介面二:開啟導航
RCT_EXPORT_METHOD(openNavMap:(NSString *)map param:(NSString *)aParam callback:(RCTResponseSenderBlock)callback){ NSDictionary *param = [aParam mj_JSONObject]; // 百度地圖 if ([map isEqualToString:kBaiduMap]) { // 開啟百度地圖 NSString *url = [[NSString stringWithFormat:@"baidumap://map/direction?origin=latlng:%@,%@|name:我的位置&destination=latlng:%@,%@|name:%@&mode=driving", param[@"originLat"], param[@"originLng"], param[@"destLat"], param[@"destLng"], param[@"dest"]] stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding]; if ([[UIApplication sharedApplication] canOpenURL:[NSURL URLWithString:@"baidumap://map/"]]) { if ([[UIApplication sharedApplication] openURL:[NSURL URLWithString:url]] == NO) { dispatch_async(dispatch_get_main_queue(), ^{ [FEHudManager showPopMessage:@"無法開啟百度地圖"]; }); } } else { dispatch_async(dispatch_get_main_queue(), ^{ [FEHudManager showPopMessage:@"無法開啟百度地圖"]; }); } } // 高德地圖 else if ([map isEqualToString:kGaodeMap]) { NSString *url = [[NSString stringWithFormat:@"iosamap://navi?sourceApplication=%@&poiname=%@&lat=%@&lon=%@&dev=1&style=2",@"健康壽光",@"目的地", param[@"destLat"],param[@"destLng"]] stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding]; if ([[UIApplication sharedApplication]canOpenURL:[NSURL URLWithString:@"iosamap://"]]){ if ([[UIApplication sharedApplication] openURL:[NSURL URLWithString:url]] == NO) { dispatch_async(dispatch_get_main_queue(), ^{ [FEHudManager showPopMessage:@"無法開啟高德地圖"]; }); } } else { dispatch_async(dispatch_get_main_queue(), ^{ [FEHudManager showPopMessage:@"無法開啟高德地圖"]; }); } } // 網頁版百度導航 else { NSString *url = [NSString stringWithFormat:@"http://api.map.baidu.com/direction?origin=%@,%@&destination=%@,%@®ion=%@&mode=driving&output=html&src=%@", param[@"originLat"], param[@"originLng"], param[@"destLat"], param[@"destLng"], @"s",@"WeiJiSMD"]; [[UIApplication sharedApplication] openURL:[NSURL URLWithString:url]]; }}
其中兩個常量的定義如下
static NSString *kBaiduMap = @"com.baidu.BaiduMap";
static NSString *kGaodeMap = @"com.autonavi.minimap";
ReactNative-地圖導航-iOS