reactnative-Map Navigation-ios

Requirements Description

Project, require access to navigation functions, including "Baidu Map, Gold map."

Analysis of the native development of scenario analysis

From the point of view of native development, the conventional approach may be

• Respectively, take Baidu, the official website, download the corresponding SDK and then integrated into the local;
• Create the corresponding Mapview, refer to the document to complete the navigation function;
• Mapview the opening parameters, passed in by the caller, Mapview internal use parameters, and finally realize the navigation
• Mapview provides an "exit" operation

It could be that way.

• Respectively take Baidu, the official website, check the "Baidu map app, the Gold Map App" method;
• Create the Mapviewtools tool class and write the calling method with reference to the document;
• Mapviewtools opening parameters, from the caller passed in, mapviewtools internal use parameters, finally adjust the Map app, to achieve navigation;

Analysis of the development angle of RN

In the case of integration with the SDK, first the native native integration is required, then the RN view component is written, and finally back to the RN project to complete the call.

• Advantages: Since then there was a map wheel;
• Cons: Need to follow the official map for a large version of the upgrade maintenance, in addition to the app volume will become larger

If it is to adjust the application mode integration, still need to native provide methods, and then write the RN interface components, and finally back to the RN project to complete the call.

• Benefits: Since then there is a map wheel, app volume is almost unchanged, do not have to care too much official version, unless the parameters have changed;
• Cons: Two apps to switch back and forth, there will be a loss of incoherent experience

Conclusion: The application of the app to integrate the way

Integration process (IOS) Create RN interface Components Nrjmap interface One: Get the available navigation methods

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:@"Baidu Map"Forkey:kbaidumap]; }        if(isamap) {[Result setValue:@"German Map"Forkey:kgaodemap]; } dispatch_async (Dispatch_get_main_queue (),^{callback (@[[result mj_jsonstring]); });}

Interface Two: Open navigation

Rct_export_method (opennavmap: (NSString *) map param: (NSString *) Aparam callback: (Rctresponsesenderblock) callback) {Nsdictionary*param =[Aparam Mj_jsonobject]; //Baidu Map    if([map Isequaltostring:kbaidumap]) {//Open Baidu MapNSString *url = [[NSString stringWithFormat:@"baidumap://map/direction?origin=latlng:%@,%@|name: My location &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:@"can't open Baidu map"];            }); }        }        Else{Dispatch_async (Dispatch_get_main_queue (),^{[Fehudmanager showpopmessage:@"can't open Baidu map"];        }); }    }        //German Map    Else if([map Isequaltostring:kgaodemap]) {nsstring*url = [[NSString stringWithFormat:@"iosamap://navi?sourceapplication=%@&poiname=%@&lat=%@&lon=%@&dev=1&style=2",@"Health Shouguang",@"Destination", 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:@"can't open map of Gao de"];            }); }        }        Else{Dispatch_async (Dispatch_get_main_queue (),^{[Fehudmanager showpopmessage:@"can't open map of Gao de"];        }); }    }        //Web version Baidu navigation    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]]; }}

Two of these constants are defined as follows
static NSString *kBaiduMap = @"com.baidu.BaiduMap";
static NSString *kGaodeMap = @"com.autonavi.minimap";

reactnative-Map Navigation-ios