ReactNative-地圖導航-iOS

需求描述

項目中，要求接入導航功能，包括“百度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",@"app名稱",@"目的地", 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=%@,%@&region=%@&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";

轉載于:https://www.cnblogs.com/univalsoft-mobile-team/p/7636658.html