ReactNative-地圖導航-iOS

標籤：調用   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=%@,%@&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";

ReactNative-地圖導航-iOS