美文网首页
react-native百度地图—ios拓展(计算两点之间距离)

react-native百度地图—ios拓展(计算两点之间距离)

作者: sybil052 | 来源:发表于2017-07-31 14:25 被阅读0次

    之前的一篇文章react-native 百度地图—Android拓展(计算两点之间距离)介绍过Android端怎么写,本来想着另开一篇文章把ios也写了,后来项目上一堆事情就给忘了,今天把ios端的补一下~
    通过之前Android端的介绍,我们知道react-native-baidu-map是将原生封装后,供react native调用。那同样的,我们先要了解怎么封装原生模块,推荐一篇文章:【React Native开发】React Native进阶之原生模块封装基础篇详解-适配iOS开发(59)
    下面我们开始ios端,我们还是在BaiduMapDemo中进行修改。

    一、新建GetDistanceModule.h

    在React Native中,原生模块就是一个Objective-C类,该类实现了RCTBridgeModule协议。

    //  GetDistanceModule.h
    //  RCTBaiduMap
    //
    //  Created by sybil052 on 2017/5/5.
    #import <Foundation/Foundation.h>
    #import "RCTBridgeModule.h"
    
    @interface GetDistanceModule : NSObject<RCTBridgeModule>
    
    @end
    
    二、新建GetDistanceModule.m

    为了实现RCTBridgeModule协议,你的GetDistanceModule.m文件需要实现RCT_EXPORT_MODULE(),用来设置指定在JavaScript端进行访问该模块的名称。

    RCT_EXPORT_MODULE(BaiduGetDistanceModule);
    

    使用RCT_EXPORT_METHOD()来声明提供给JavaScript调用的方法,不然这些方法JavaScript前端是无法进行调用的。有时我们需要传递一个返回值给JavaScript,可以通过回调或者发送事件解决。在传递返回值时,不能直接通过桥接进行传递JavaScript的距离对象的,所以我们这边需要把距离转换成一个字符串或者数字进行传递。

    RCT_EXPORT_METHOD(getDistance:(double)lat1 lng1:(double)lng1 lat2:(double)lat2 lng2:(double)lng2 ){
        ...
        [self.bridge.eventDispatcher sendAppEventWithName:@"getDistanceResult" body:@{@"distance":[NSString stringWithFormat:@"%f",distance]}];
    }
    

    好了,上完整代码:

    //  GetDistanceModule.m
    //  RCTBaiduMap
    //
    //  Created by sybil052 on 2017/5/5.
    
    #import "GetDistanceModule.h"
    #import <UIKit/UIKit.h>
    #import <BaiduMapAPI_Utils/BMKGeometry.h>
    #import "RCTEventDispatcher.h"
    
    @implementation GetDistanceModule
    
    @synthesize bridge = _bridge;
    
    RCT_EXPORT_MODULE(BaiduGetDistanceModule);
    
    RCT_EXPORT_METHOD(getDistance:(double)lat1 lng1:(double)lng1 lat2:(double)lat2 lng2:(double)lng2 ){
        
        BMKMapPoint point1 = BMKMapPointForCoordinate(CLLocationCoordinate2DMake(lat1,lng1));
        BMKMapPoint point2 = BMKMapPointForCoordinate(CLLocationCoordinate2DMake(lat2,lng2));
        CLLocationDistance distance = BMKMetersBetweenMapPoints(point1,point2);
        
        [self.bridge.eventDispatcher sendAppEventWithName:@"getDistanceResult" body:@{@"distance":[NSString stringWithFormat:@"%f",distance]}];   
    }
    
    @end
    
    三、新建GetDistance.js

    在写Android的时候我们已经新建过了,所以这次直接用就好了~

    四、导出GetDistance.js

    在写Android的时候我们已经导出过了,所以这次直接用就好了~

    五、在项目中调用

    使用方法在写Android的时候也写过了,so~ 直接运行!就不上效果图了~

    到这里,我们的react native百度地图(iOS)拓展,就完成了。

    相关文章

      网友评论

          本文标题:react-native百度地图—ios拓展(计算两点之间距离)

          本文链接:https://www.haomeiwen.com/subject/outrlxtx.html